React+Laravel Sanctum注册出现419 CSRF令牌不匹配错误求助

Laravel 端配置调整 #

1. 配置 Sanctum 允许的前端域名
   打开 .env 文件，修改以下配置项：

SANCTUM_STATEFUL_DOMAINS=localhost:3000 # 替换为你的React项目实际端口
SESSION_DOMAIN=localhost

线上环境请替换为实际业务域名。

2. 更新跨域（CORS）配置
   编辑 config/cors.php，确保以下参数设置正确：

'paths' => ['api/*', 'sanctum/csrf-cookie'],
'allowed_methods' => ['*'],
'allowed_origins' => ['http://localhost:3000'], // 对应React项目地址
'allowed_headers' => ['*'],
'supports_credentials' => true, // 必须开启，允许请求携带Cookie

3. 确认路由中间件设置
   注册接口需使用 api 中间件，路由定义示例：

Route::post('/register', [UserAPIController::class, 'register'])->middleware('api');

React 端代码调整 #

1. 先获取CSRF Token再发起注册请求
   Sanctum依赖Cookie存储CSRF Token，因此注册前需先请求Token接口。修改 Register.js 中的注册逻辑：

const handleRegister = async (e) => {
  e.preventDefault();
  
  // 先请求CSRF Token
  await fetch('http://localhost:8000/sanctum/csrf-cookie', {
    credentials: 'include' // 必须携带Cookie
  });

  // 发起注册请求
  const response = await fetch('http://localhost:8000/api/register', {
    method: 'POST',
    credentials: 'include',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      name: name,
      email: email,
      password: password
      // 补充你的其他注册字段
    })
  });

  const data = await response.json();
  // 后续处理逻辑
};

2. 全局配置请求携带Credentials
   如果使用Axios，可在 App.js 中全局配置，避免每次请求重复设置：

import axios from 'axios';

axios.defaults.baseURL = 'http://localhost:8000/api';
axios.defaults.withCredentials = true; // 全局开启携带Cookie

使用原生fetch时，需确保每个请求都添加 credentials: 'include'。

额外检查项 #

• 确保Laravel项目的 storage/framework/sessions 目录拥有写入权限
• 清除浏览器缓存和Cookie后重新测试
• 验证前端请求的域名、端口与Laravel配置的 SANCTUM_STATEFUL_DOMAINS 完全一致

内容的提问来源于stack exchange，提问作者Isaac Tetteh