Laravel 11与React 18中Axios.post出现CSRF Token不匹配问题求助

核心原因 #

Laravel默认仅对**非GET请求（POST/PUT/DELETE等）**校验CSRF令牌，GET请求无需校验，因此POST报错本质是令牌未正确传递或验证失败。

具体解决方案 #

1. 正确获取并配置CSRF令牌

Laravel提供两种获取CSRF令牌的方式，任选其一配置到Axios即可：

方式一：从页面meta标签读取（适合同域渲染）

在Laravel的主模板（如resources/views/app.blade.php）中确保存在CSRF meta标签：

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

在React项目的Axios初始化代码中全局设置请求头：

import axios from 'axios';

const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
axios.defaults.headers.common['X-CSRF-TOKEN'] = csrfToken;

方式二：自动从Cookie读取（推荐，支持前后端分离）

Laravel默认会设置XSRF-TOKEN Cookie，配置Axios自动读取该Cookie并携带X-XSRF-TOKEN请求头：

import axios from 'axios';

axios.defaults.withCredentials = true; // 允许携带Cookie
axios.defaults.xsrfCookieName = 'XSRF-TOKEN';
axios.defaults.xsrfHeaderName = 'X-XSRF-TOKEN';

注意：若前后端跨域，需确保Laravel的CORS配置允许携带凭证（见下文第2点）。

2. 处理跨域场景的CORS配置

如果React和Laravel分属不同域名，需修改Laravel的CORS配置：
编辑config/cors.php，确保以下配置正确：

return [
    'paths' => ['api/*', 'sanctum/csrf-cookie'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['http://your-react-domain.com'], // 替换为你的React域名
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => true, // 必须设为true，允许携带Cookie
];

3. 处理令牌过期（可选）

当用户session过期时，CSRF令牌会失效，可通过Axios响应拦截器自动处理419错误（Laravel的CSRF不匹配状态码）：

axios.interceptors.response.use(
    response => response,
    async error => {
        if (error.response?.status === 419) {
            // 重新获取CSRF令牌（若用Sanctum则调用/sanctum/csrf-cookie）
            await axios.get('/sanctum/csrf-cookie');
            // 重发原请求
            return axios(error.config);
        }
        return Promise.reject(error);
    }
);

4. 谨慎使用CSRF白名单（不推荐）

仅当某些公开路由无需CSRF校验时，才在app/Http/Middleware/VerifyCsrfToken.php的$except数组添加路由：

protected $except = [
    '/api/public-webhook',
];

注意：此方式会降低安全性，仅用于完全公开的接口。

内容的提问来源于stack exchange，提问作者Matti Kiviharju