Laravel，尝试通过AJAX向控制器传递数据时出现不匹配的令牌错误

Laravel AJAX请求中的令牌不匹配错误解决方案

基础概念

在Laravel中，CSRF（跨站请求伪造）保护是默认启用的安全机制。当使用AJAX向Laravel控制器发送POST、PUT、PATCH或DELETE请求时，必须包含有效的CSRF令牌，否则会返回"419 HTTP状态码"或"CSRF token mismatch"错误。

错误原因

出现令牌不匹配错误通常有以下几种原因：

请求中没有包含CSRF令牌
令牌已过期（默认会话有效期为2小时）
令牌不正确或格式错误
请求头没有正确设置

解决方案

方法1：在表单中包含CSRF令牌

$.ajax({
    url: '/your-endpoint',
    type: 'POST',
    data: {
        _token: '{{ csrf_token() }}',
        // 其他数据...
    },
    success: function(response) {
        console.log(response);
    }
});

方法2：在meta标签中设置CSRF令牌

在HTML头部添加：

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

然后在AJAX请求中设置请求头：

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

$.ajax({
    url: '/your-endpoint',
    type: 'POST',
    data: {
        // 你的数据...
    },
    success: function(response) {
        console.log(response);
    }
});

方法3：对于API路由（免除CSRF保护）

如果你正在开发API，可以在app/Http/Middleware/VerifyCsrfToken.php中排除特定路由：

protected $except = [
    'your-api-endpoint/*',
    'another-endpoint'
];

最佳实践

对于普通表单提交：使用Laravel的@csrf指令
对于AJAX请求：推荐使用方法2（meta标签+请求头）
对于纯API：考虑使用API认证方式（如JWT）并禁用CSRF保护

示例代码

完整的前后端交互示例：

<!-- 视图文件 -->
<head>
    <meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<script>
$(document).ready(function() {
    $('#submit-btn').click(function() {
        $.ajax({
            url: '/process-data',
            type: 'POST',
            data: {
                name: $('#name').val(),
                email: $('#email').val()
            },
            success: function(response) {
                alert('成功: ' + response.message);
            },
            error: function(xhr) {
                alert('错误: ' + xhr.responseJSON.message);
            }
        });
    });
});
</script>

// 控制器
public function processData(Request $request)
{
    $validated = $request->validate([
        'name' => 'required|string|max:255',
        'email' => 'required|email'
    ]);
    
    // 处理数据...
    
    return response()->json(['message' => '数据处理成功']);
}