Laravel 5.4 TokenMismatchException Ajax 调用答案

【问题标题】：Laravel 5.4 TokenMismatchException Ajax callLaravel 5.4 TokenMismatchException Ajax 调用
【发布时间】：2019-03-14 04:20:29
【问题描述】：

只有当我提交带有 ajax 调用的表单时，我才会收到 TokenMismatchException 错误？如果我不使用 Ajax 调用，我不会收到错误消息。

这是什么原因造成的？

Laravel 5.4

我的 app.blade.php 脑子里有这个：

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

我的ajax.js

$( document ).ready(function() {
    // storing comments
    $('#storeComment').on('submit', function(e) {
        e.preventDefault();

        $.ajax({
            method: 'POST',
            url: '/comments',
            data: {},
            success: function(response){
                console.log(response);
            },
            error: function(jqXHR, textStatus, errorThrown) { 
                console.log(JSON.stringify(jqXHR));
                console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
            }
        });
    });
});

我还使用了 bootstrap.js，它自动将 csrf-token 元标记的值注册到 Axios HTTP 库。如 Laravel 文档中所述。

控制方法：

public function store(CommentRequest $request)
{
    $comment = Auth::user()->comments()->save(new Comment($request->all()));

    $response = array(
        'status' => 'success',
        'comment' => $comment
    );

    return response()->json($response);
}

【问题讨论】：

你是否在数据字段中发送了 csrf 令牌
@ShaielndraGupta 我不认为这是必要的，因为我将它存储在元标记中，如 laravel 文档中所述？
但是你没有在这里使用axios。你用jquery
因为automatic csrf injection在axios里，不在jquery里。
@Michael 你是对的。 ajaxSetup 调用应该为您适当地设置标题。我认为您的会话可能存在潜在问题。

标签： ajax laravel laravel-5 csrf

【解决方案1】：

将令牌添加到 ajax 的数据中：

$.ajax({
type: 'POST',
 ......
data: {'_token': '{{ csrf_token() }}'},
........

【讨论】：

这仍然会导致 TokenMisconception（同样的错误）
您是否使用您的元令牌来 ajax 标头？请参阅此处stackoverflow.com/questions/32738763/… zarpio 的回答。

【解决方案2】：

您可以直接调用Axios 而不是调用jQuery 并拥有这个automatic csrf injection，代码如下：

var data = ['name' => 'Nikola', 'lastName' => 'Gavric'];
axios.post('/comments', data).then(function(response) {
    console.log(response);
});

编辑：axios 的完整示例是

$('#storeComment').on('submit', function(e) {
    e.preventDefault();

    // Retrieve form data
    var temp = [];
    var data = $(this).serializeArray();
    $.each(data, function(index, field) {
        temp[field.name] = field.value;
    });

    // Post request with temp as data
    axios.post('/comments', temp).then(function(data) {
        console.log(data); 
    });
});

这是jQuery 的代码，请使用您更喜欢的方法：

    $.ajax({
        method: 'POST',
        url: '/comments',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        data: {
            'name': 'Nikola',
            'lastName': 'Gavric'
        },
        success: function(response){
            console.log(response);
        },
        error: function(jqXHR, textStatus, errorThrown) { 
            console.log(JSON.stringify(jqXHR));
            console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
        }
    });

【讨论】：

【解决方案3】：

您可以尝试在App\Http\Middleware\VerifyCsrfToken.php 的特定路由上禁用 CSRF 验证

 protected $except = ['/comments'];

【讨论】：

不要禁用csrf保护，查找token错误的根本原因。
Devon 我不知道您是否知道所有者要求的调用问题显然是 API 调用。默认情况下，API 调用应放在 CSRF 排除范围内，请您详细说明您的反对意见。谢谢
原因是使用您的 API 的人不知道 CSRF 令牌并且不必知道它，因此所有 API url 都被排除在 CSRF 检查之外
@NikolaGavric，我在任何地方都看不到这是一个“api”调用。没有传递 api 令牌。所有的 post 请求都需要某种令牌来防止 CSRF 攻击。
我这样做是因为他不提供任何 HTML 内容，而是提供 application/json，这表明这是一个 ajax 调用，进一步表明它必须是一个 API 调用而不是 web 调用@德文

【解决方案4】：

$.ajax({
          type: 'POST',
          ........
            headers: {
                 'X-CSRF-TOKEN': '{{ csrf_token() }}'
           }    
         ...........
  });

试试这个...

【讨论】：

【解决方案5】：

将csrf-token 添加到应用程序的头部：

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

然后：

$.ajax({
  url: '/some/url',
  type: 'POST',
  headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
  },
  success: function(res){
      // Your result
      console.log(res);
  }
});

【讨论】：