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

Question

我正在尝试使用 fetch api 制作一个 http 帖子。即使我正在发送令牌，我 在 VerifyCsrfToken.php 中收到错误 TokenMismatchException 。如何使用 fetch api 进行调用？ （我也尝试过使用 jQuery ajax 并且它工作得很好）继承人获取 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 调用标头

原文由 Abhishek Kumar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我能够让它发挥作用。

我必须做出 2 处更改

1. Fetch Api 默认不使用cookie。所以为了让它使用我添加的cookie

credentials: "same-origin"

2）数据需要以Form数据格式提交而不是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){

         });

原文由 Abhishek Kumar 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Similoluwa Oluwatomi 发布，翻译遵循 CC BY-SA 3.0 许可协议