Laravel Sanctum+Fortify+Vue SPA登录遇419 CSRF令牌不匹配错误

核心问题排查与修复 #

1. 自定义Axios实例未启用XSRF Token自动携带 #

你的AuthService.js中创建的authClient没有开启withXSRFToken配置，全局axios的设置仅对window.axios生效，自定义实例不会继承该配置，导致POST请求时未自动携带Laravel设置的XSRF-TOKEN Cookie对应的请求头。

修复代码：
修改services/AuthService.js中的authClient配置：

export const authClient = axios.create({
  baseURL: 'http://localhost:80',
  withCredentials: true,
  withXSRFToken: true // 新增该行，启用XSRF Token自动携带
})

2. 模板输入框拼写错误（需修正） #

LoginComponent.vue模板中密码输入框标签拼写错误，会导致密码无法正确绑定：

<input v-model="password" /> <!-- 将<inpu>修正为<input> -->

3. 确认Sanctum状态域配置 #

确保.env中的SANCTUM_STATEFUL_DOMAINS准确包含前端SPA的完整域名（带端口），sanctum.php保持默认读取该变量即可：

SANCTUM_STATEFUL_DOMAINS=http://localhost:5173

4. 补全CORS关键配置 #

config/cors.php需开启凭证支持，否则浏览器会阻止携带Cookie的跨域请求：

'paths' => [
    'api/*',
    'login',
    'sanctum/csrf-cookie',
],

'allowed_methods' => ['*'],

'allowed_origins' => [env('SPA_URL','http://localhost:5173')],

'allowed_headers' => ['*'],

'supports_credentials' => true, // 必须设置为true

5. 修正Session配置（本地开发） #

.env中Session配置需适配本地HTTP环境：

SESSION_DRIVER=cookie
SESSION_DOMAIN=localhost
SESSION_SECURE_COOKIE=false // 本地开发设为false，生产环境根据HTTPS调整

额外验证步骤 #

• 清除浏览器缓存与Cookie，避免旧Token干扰
• 查看浏览器开发者工具，确认请求/sanctum/csrf-cookie后，成功生成XSRF-TOKEN和laravel_session Cookie
• 检查POST /login请求头，确认包含X-XSRF-TOKEN字段且值与Cookie一致

内容的提问来源于stack exchange，提问作者johnny shepherd