Laravel+React前端用Axios请求时遇CSRF Token不匹配错误求助

核心排查与修复步骤 #

1. 修正Laravel Sanctum与Session域名配置 #

打开项目根目录的.env文件，确保以下配置正确：

SANCTUM_STATEFUL_DOMAINS=localhost:3000
SESSION_DOMAIN=localhost

• SANCTUM_STATEFUL_DOMAINS需包含前端的完整域名+端口
• SESSION_DOMAIN不要带端口，否则Cookie无法跨端口共享

同时检查config/sanctum.php的stateful数组，确保包含前端地址：

'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', 'localhost:3000,127.0.0.1:3000')),

修改后执行php artisan config:clear清除配置缓存。

2. 手动强制Axios携带CSRF令牌 #

Axios默认会自动读取XSRF-TOKENCookie并设置X-XSRF-TOKEN请求头，但部分场景可能失效，可添加请求拦截器确保：

import axios from 'axios';

const axiosClient = axios.create({
  baseURL: import.meta.env.VITE_BACKEND_URL,
  withCredentials: true,
});

// 添加CSRF令牌拦截器
axiosClient.interceptors.request.use(config => {
    // 从Cookie中提取并解码XSRF-TOKEN
    const xsrfToken = document.cookie.split('; ')
        .find(row => row.startsWith('XSRF-TOKEN='))
        ?.split('=')[1];
    
    if (xsrfToken) {
        config.headers['X-XSRF-TOKEN'] = decodeURIComponent(xsrfToken);
    }
    return config;
});

export default axiosClient;

3. 完善CORS配置细节 #

打开config/cors.php，确保以下关键配置正确：

return [
    'paths' => ['api/*', 'sanctum/csrf-cookie', 'login', 'logout'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['http://localhost:3000'], // 不要用*，带凭证请求不支持通配符
    'allowed_headers' => ['*', 'X-XSRF-TOKEN'],
    'supports_credentials' => true, // 必须设为true才能携带Cookie
];

修改后执行php artisan config:clear生效。

4. 验证请求的Cookie与请求头匹配 #

在浏览器开发者工具的Network面板，查看POST /login请求：

• 确认Request Cookies中存在laravel_session和XSRF-TOKEN
• 确认Request Headers中存在X-XSRF-TOKEN，且其值为XSRF-TOKENCookie解码后的内容
  若请求头无此字段，说明Axios自动携带逻辑失效，使用步骤2的拦截器强制添加。

5. 确保Session驱动非无状态类型 #

检查.env中的SESSION_DRIVER，不要使用array（无状态驱动无法保存Session，导致CSRF验证失败）：

SESSION_DRIVER=file

6. 检查中间件组配置 #

打开app/Http/Kernel.php，确保api中间件组包含EnsureFrontendRequestsAreStateful中间件：

protected $middlewareGroups = [
    'api' => [
        \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
        'throttle:api',
        \Illuminate\Routing\Middleware\SubstituteBindings::class,
    ],
];

7. 清除浏览器缓存与Cookie #

旧Cookie可能干扰验证，直接清空浏览器对应域名的Cookie，或使用隐私窗口测试，排除缓存问题。

内容的提问来源于stack exchange，提问作者Noureddine DRIOUECH