Laravel CSRF令牌不匹配异常。通过jQuery ajax将"Put“请求发送到资源路由

Laravel 的 CSRF（跨站请求伪造）保护机制是为了防止恶意网站通过用户的浏览器发起对应用程序的非法请求。当使用 jQuery 的 AJAX 发送请求时，如果没有正确设置 CSRF 令牌，就会出现“CSRF 令牌不匹配”的异常。

基础概念

CSRF 令牌是一个随机生成的字符串，它与用户的会话相关联，并且每次请求都需要验证这个令牌以确保请求是由合法的用户发起的。

类型

同步 CSRF 保护：在表单中包含一个隐藏字段。
异步 CSRF 保护：通过 AJAX 请求头传递令牌。

应用场景

Web 表单提交：确保表单提交是由用户本人操作的。
AJAX 请求：保护后台 API 不受 CSRF 攻击。

遇到的问题及原因

当使用 jQuery 的 AJAX 发送 PUT 请求时，如果没有在请求头中包含 CSRF 令牌，Laravel 将无法验证请求的合法性，从而抛出“CSRF 令牌不匹配”的异常。

解决方法

方法一：在 HTML Meta 标签中设置 CSRF 令牌

在 HTML 的 <head> 部分添加以下 meta 标签：

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

然后在 jQuery 中设置全局 AJAX 请求头：

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

方法二：在 AJAX 请求中直接设置 CSRF 令牌

在发送 AJAX 请求时，可以直接在请求头中添加 CSRF 令牌：

$.ajax({
    url: '/your-endpoint',
    type: 'PUT',
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    data: {
        // your data here
    },
    success: function(response) {
        // handle success
    },
    error: function(xhr, status, error) {
        // handle error
    }
});

方法三：在 Blade 模板中设置 CSRF 令牌

如果你在 Blade 模板中使用 AJAX，可以直接在模板中设置 CSRF 令牌：

<script>
    let token = '{{ csrf_token() }}';

    $.ajax({
        url: '/your-endpoint',
        type: 'PUT',
        headers: {
            'X-CSRF-TOKEN': token
        },
        data: {
            // your data here
        },
        success: function(response) {
            // handle success
        },
        error: function(xhr, status, error) {
            // handle error
        }
    });
</script>

示例代码

假设你有一个 PUT 请求需要发送到 /api/resource/1，以下是完整的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>CSRF Protection</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="update-resource">Update Resource</button>

    <script>
        $(document).ready(function() {
            $('#update-resource').click(function() {
                $.ajax({
                    url: '/api/resource/1',
                    type: 'PUT',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        name: 'New Resource Name'
                    },
                    success: function(response) {
                        alert('Resource updated successfully!');
                    },
                    error: function(xhr, status, error) {
                        alert('An error occurred: ' + error);
                    }
                });
            });
        });
    </script>
</body>
</html>

通过以上方法，你可以确保在使用 jQuery 的 AJAX 发送 PUT 请求时，Laravel 的 CSRF 保护机制能够正常工作，避免出现“CSRF 令牌不匹配”的异常。