如何修复React+Laravel Sanctum项目中/sanctum/csrf-cookie接口CORS报错

1. 修复cors.php配置 #

报错明确说明请求头x-xsrf-token不被允许，你当前allowed_headers数组里只配置了X-CSRF-Token，缺少axios默认自动携带的X-XSRF-TOKEN字段。
修改config/cors.php中的allowed_headers项：

'allowed_headers' => [  
    'Origin',
    'Content-Type', 
    'Accept',
    'Authorization',
    'X-Requested-With',
    'X-CSRF-Token',
    'X-XSRF-TOKEN' // 新增这一行
],

同时注意：你当前allowed_origins设为*且开启了supports_credentials = true，不符合浏览器CORS规则会被拦截，需要修改为前端实际地址：

'allowed_origins' => ['http://localhost:3000'],

修改完成后执行命令清理配置缓存生效：
php artisan config:clear

2. 修复app.js中Authorization头语法错误 #

你当前的token拼接写法存在错误，变量没有正确传入，修改为对应模板字符串写法：

axios.interceptors.request.use(function (config) {
    const token = localStorage.getItem('auth_token');
    config.headers.Authorization = token ? `Bearer ${token}` : '';
    return config;
});

3. 可选环境配置优化 #

如果仍存在跨域问题，可在.env文件中追加以下配置：

SESSION_DOMAIN=localhost
SANCTUM_STATEFUL_DOMAINS=localhost:3000

修改完成后执行php artisan config:clear清理缓存即可。

内容的提问来源于stack exchange，提问作者Nirodha Lakmali