Question

我正在尝试使用fetch api制作一篇http帖子。即使我发送令牌，我在VerifyCsrfToken.php 中收到错误 TokenMismatchException。如何使用fetch api拨打电话？（我也尝试过使用jQuery ajax并且它的工作正常）继续使用fetch api代码

var URL = $("#form").attr("action"); var token = $("input[name='_token']").val(); var group_id = $(this).val(); fetch(URL, { method: 'post', mode: 'no-cors', body: JSON.stringify({ 'csrf-token': token, 'group_id': group_id }) }).then(function(response){ return response.json(); }) .then(function(json){ }) .catch(function(error){ });

我已经像这样添加了令牌

<form id="form" action="{{ url('api/getcoursebygroup') }}"> <input type="hidden" name="_token" id="csrf-token" value="{{ Session::token() }}" /> </form>

这个jQuery ajax调用工作正常：

$.ajax({ type: "POST", url: URL, data: { "group_id" : group_id, "_token" : token }, dataType: 'json' }).done(function (result) { if(result.code == 1){ } });

jQuery ajax调用标题

获取api调用标头

Answer 1

最后我能够让它发挥作用：）

我必须做出2次更改

1）获取Api默认情况下不使用cookie。所以要使用我添加的cookie

credentials: "same-origin"

2）数据需要以表格数据格式而不是json

提交

所以这是我的工作代码

       var URL = $("#form").attr("action");
       var token = $("input[name='_token']").val();
       var group_id = $(this).val();

      fetch(URL, {
       method: 'post',
       credentials: "same-origin",
       body: new FormData(document.getElementById('form'))
     }).then(function(response){
           return response.json();
       })  .then(function(json){

         // change course

       })
         .catch(function(error){


         });

Answer 2

我可能迟到了，但这也有效

    fetch("/audio/signed", {
      headers: {
        "Content-Type": "application/json",
        "Accept": "application/json",
        "X-Requested-With": "XMLHttpRequest",
        "X-CSRF-Token": $('input[name="_token"]').val()
      },
      method: "post",
      credentials: "same-origin",
      body: JSON.stringify({
        key: "value"
      })
    })

Answer 3

index.blade.php

ID , Exercise , grade 
1  , 1.1      , 5
1  , 1.2      , 9
.
.

app.js

<meta name="csrf-token" content="{{ csrf_token() }}">

OrderController.php

const csrfToken = document.head.querySelector("[name~=csrf-token][content]").content;

function orderPost(order) {
    fetch('/orders', {
        method: 'post',
        body: JSON.stringify(order),
        headers: {
            'Content-Type': 'application/json',
            "X-CSRF-Token": csrfToken
        }
    })
    .then(response => {
        return response.text();
    })
    .then(text => {
        return console.log(text);
    })
    .catch(error => console.error(error));
};

Answer 4

经过一些研究，这里应该为你做一些技巧：

var myHeaders = new Headers({
  "X-CSRF-TOKEN": $("input[name='_token']").val()
});

var URL = $("#form").attr("action");
  var token = $("input[name='_token']").val();
  var myInit = {
   method: 'post',
   headers: myHeaders,
   mode: 'no-cors',
   body: JSON.stringify({
       'group_id': group_id
   };
  var group_id = $(this).val();
  fetch(URL, myInit)
})
.then(function(response){
       return response.json();
})  .then(function(json){



})
.catch(function(error){


});

如果你有Chrome＆lt; 41

Answer 5

function post(id){

        const token = '{{ csrf_token() }}';
        web = "{{request()->getHttpHost()}}" ;
        url = 'http://' + web + '/metodo';

        fetch(url, {
            method: 'post',
            credentials: "same-origin",
            headers: {
                'Content-Type': 'application/json',
                "X-CSRF-Token": token
            },
            body: JSON.stringify({
                key: id
            })
            }).then(response => {
                return response.json();
            }).then(text => {
                return console.log(text);
            }).catch(error => console.error(error));

    }

Answer 6

如果您使用的是表格，请记得添加

<input type="hidden" name="_token" id="csrf-token" value="{{ Session::token() }}" />

或使用刀片按钮：

{{ Form::token() }}

在任何地方添加它（通常是正文顶部）对于所有JavaScript驱动按钮都是足够的。如果您使用刀片生成表单，则会自动添加，因此不必执行此操作。

如GONG

所述，将_token更改为csrf-token

在laravel中的Http Post使用fetch api给出TokenMismatchException

6 个答案: