Vue SPA对接Laravel 10.9 Sanctum遇419 CSRF令牌不匹配问题

云上老周

2026-7-21

解决方案：Vue SPA + Laravel Sanctum 419 CSRF Token Mismatch 问题

后端配置检查

1. .env 关键参数设置

确保SESSION_DOMAIN和SANCTUM_STATEFUL_DOMAINS配置匹配前后端环境，本地开发示例：

SESSION_DOMAIN=localhost
SANCTUM_STATEFUL_DOMAINS=localhost:3000 # 你的Vue SPA端口
APP_URL=http://localhost:8000 # Laravel后端地址

SESSION_DOMAIN需与前后端根域名一致（避免混用localhost和127.0.0.1）
SANCTUM_STATEFUL_DOMAINS填写前端完整域名+端口

2. CORS 配置（config/cors.php）

调整跨域配置以允许携带凭证：

return [
    'paths' => ['api/*', 'sanctum/csrf-cookie', 'login'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['http://localhost:3000'], // 前端地址
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => true, // 必须设为true
];

3. Sanctum 配置（config/sanctum.php）

确认stateful数组包含前端域名，或直接读取.env配置：

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

前端配置调整

1. Axios 核心配置

必须开启withCredentials，否则浏览器无法保存CSRF Cookie：

import axios from 'axios';

axios.defaults.baseURL = 'http://localhost:8000'; // 后端地址
axios.defaults.withCredentials = true; // 关键：允许携带凭证

2. 登录请求顺序

严格按「先获取CSRF Cookie，再发登录请求」的顺序执行，需用异步等待：

async function login() {
  try {
    // 先获取CSRF Cookie
    await axios.get('/sanctum/csrf-cookie');
    // 再发送登录请求
    const response = await axios.post('/login', {
      email: 'user@example.com',
      password: 'password'
    });
    // 处理登录成功逻辑
  } catch (error) {
    console.error(error);
  }
}