Ajax向Laravel发送Post请求 - CSRF令牌不匹配

Question

我试图使用ajax向Laravel后端发送数据，但是我收到了“CSRF token mismatch”错误。

首先，我已将令牌放置在html中（在body中但不在其表单内部，因为它不是整个表单，只有2个要发布的元素）：

<input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">

然后在“文档准备就绪”时，我尝试使用ajax提交数据。

data["_token"] = jQuery('#token').val();  

// Also tried this:
jQuery.ajaxSetup({
       headers: {
           'X-CSRF-TOKEN': jQuery('#token').val()
       }
})

console.log(data) // returns the array with _token: "esOKmY8Tpr4UvhTYMhWcWui0rpvYEjJ3es7ggics"

jQuery.ajax({
     type: "POST",
     url: '/my-route',
     data: data,
     success: function() {
          console.log("A");
     }
});

我想要提交的数据是一个更大表单的一小部分，使用这种方法，我可以自动填充表单。这些小的HTML输入块不在任何子表单中。也许这就是问题所在？

- Form:
- A: bla // to be posted
- B: hello  // to be posted
- C: smt else // no post

但是获取数值工作正常

路由：

Route::post('/my-route', 'AdminController@theFunction')->middleware('admin');

---

编辑：我将<input>更改为<meta>标记

- senty

---

你能展示一下你的路线吗？ - Carlos

问题看起来像是源策略出了问题。在正常情况下，Laravel CSRF应该可以直接使用，无需任何技巧。 - Damaged Organic

管理员中间件是否正在重定向？ - zyglobe

最终我取消了管理员页面的csrf。 - senty

请查看以下内容：https://dev59.com/77Dla4cB1Zd3GeqP61qd - Prateek

Answer 1

我遇到了同样的问题，尝试在你的meta中加入CSRF标签，就像这样

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

并且在您的Ajax代码中像这样读取它：

<script type="text/javascript">
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});
</script>

最近更新

请将您的url变量修改为以下形式：

jQuery.ajax({
    type: "POST",
    url: '/my-route'+'?_token=' + '{{ csrf_token() }}',
    data: data,
    success: function() {
         console.log("A");
    }
  });

- Nour

---

我按照你说的做了，但还是出现了csrf令牌不匹配的错误。我记录了 $（'meta[name="csrf-token"]'）.attr('content') 并成功记录了令牌，但仍然存在令牌不匹配的错误。很遗憾，这不是答案 :/ - senty

为什么不尝试将这条路由从你的中间件中排除掉呢？ - Nour

尝试将以下内容添加到您的 AJAX 请求中： beforeSend: function(request) { return request.setRequestHeader("X-CSRF-Token", $("meta[name='token']").attr('content')); } - Nour

能否将它添加到上面的答案部分？我不明白如何在这里实现它。 - senty

对不起，我已经修改了，请看一下。 - Nour

Answer 2

试一下

    var formData = new FormData();
    formData.append("_token", "{{ csrf_token() }}");
    $.ajax({
    headers: {
    'X-CSRF-TOKEN': "{{ csrf_token() }}"
    },
    url: 'save_search', //保存搜索
    data: formData,
    processData: false, //不处理数据
    type: 'POST',
    success: function ( data ) { //成功后执行的函数
    alert( data );
    }
    });

- Keshav Joshi