Javascript laravel中的Http Post使用fetch api提供令牌不匹配异常

我正在尝试使用fetchapi制作一个http帖子。尽管我正在发送令牌，但我在VerifyCsrfToken.php中得到了错误令牌失配异常。如何使用fetch api进行调用？（我还尝试了jQueryAjax及其完美的工作方式）下面是获取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>

jqueryajax调用头

获取api调用头

---

如果您正在使用表单，请记住添加

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

在任何地方（通常在正文的顶部）添加这个按钮就足以满足所有JavaScript驱动的按钮。如果您使用blade生成表单，这将自动添加，因此无需执行此操作

---

并将

\u token

更改为

csrf token

，如龚所述

经过一些研究，以下是应该为您做的技巧：

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，它也不会工作。我可以让它工作

我要做两个改变

1） 默认情况下，获取Api不使用cookie。所以，为了让它使用我添加的cookie

凭证：“相同来源”

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){


         });

---

我可能会迟到，但这也行

    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"
      })
    })

---

index.blade.php

app.js

const csrfToken=document.head.querySelector（“[name~=csrf-token][content]”）。content；
功能orderPost（订单）{
获取（“/orders”{
方法：“post”，
正文：JSON.stringify（order），
标题：{
“内容类型”：“应用程序/json”，
“X-CSRF-Token”：csrfToken
}
})
。然后（响应=>{
返回response.text（）；
})
。然后（文本=>{
返回console.log（文本）；
})
.catch（error=>console.error（error））；
};

OrderController.php

公共函数存储（请求$Request）{
$order=新订单（）；
$order->user_id=$request->json（'user_id'）；
$order->item_list=$request->json（'item_list'）；
$order->leave_note=$request->json（'leave_note'）；
$order->total=$request->json（'total'）；
$order->save（）；
$response=[
“状态”=>“成功”，
'消息'=>'已存储订单'，
];
return response（）->json（$response）；
}

哪个laravel版本？对于5.*它应该是

csrf令牌

而不是

\u令牌

hm。。。你能在开发工具中比较两个请求的xhr吗？当我调用jquery ajax时，它使用的是_令牌而不是csrf令牌。我使用的是laravel 5.2，很抱歉，这是我的错。我把它与

meta

name混淆了当我调用jquery-ajax时，它使用的是_令牌而不是csrf令牌，我使用的是laravel 5。2@AbhishekKumar现在试试吧，修复了，这是因为异步。至少我现在可以在我的plunkr中看到标题x-csrf-token。你可以在这里看到：你节省了我的时间！这是一个救命恩人。谢谢。申报的代币在哪里使用？

       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){


         });

    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"
      })
    })

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));

    }