Vue3 SPA对接Laravel Fortify时Axios请求出现CSRF Token不匹配错误

问题场景 #

本地搭建Vue3 SPA（运行在5173端口）与Laravel 10项目（运行在8000端口），通过Axios发起API请求。已成功调用axios.get('http://localhost:8000/sanctum/csrf-cookie')获取CSRF Cookie（响应码204），但向/login发起POST请求时返回419状态码，提示“CSRF token mismatch”错误。

解决方案 #

1. 配置Axios自动携带CSRF Token #

Laravel Sanctum要求前端将Cookie中的XSRF-TOKEN值放入请求头X-XSRF-TOKEN中。Axios默认支持此逻辑，但需显式配置确保匹配Laravel的Cookie和头名称：

修改main.js，添加CSRF相关配置：

import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios';

axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
axios.defaults.headers.common["Content-Type"] = "application/json";
axios.defaults.headers.common["Accept"] = "application/json";
axios.defaults.withCredentials = true;
// 新增：指定CSRF Cookie和请求头名称，与Laravel Sanctum匹配
axios.defaults.xsrfCookieName = 'XSRF-TOKEN';
axios.defaults.xsrfHeaderName = 'X-XSRF-TOKEN';

createApp(App).mount('#app')

2. 验证Laravel配置并清除缓存 #

确认.env中的状态域与会话域配置正确，然后清除Laravel配置缓存，避免旧配置生效：

确认.env配置：

APP_URL=http://localhost:8000
FRONTEND_URL=http://localhost:5173
SESSION_DOMAIN=localhost
SANCTUM_STATEFUL_DOMAINS=localhost:5173

执行缓存清除命令：

php artisan config:clear

3. 检查Login路由的中间件 #

默认Laravel的/login路由由web中间件组处理（包含VerifyCsrfToken），确保你的login路由未被错误放置在api.php中（api中间件组默认跳过CSRF验证，但Sanctum状态化请求需要CSRF验证）。

如果是自定义登录路由，需确保路由使用web中间件或包含VerifyCsrfToken逻辑。

4. 清除浏览器Cookie并重启服务 #

浏览器缓存的旧Cookie可能导致验证失败，执行以下操作：

• 清除浏览器中localhost相关的Cookie
• 重启Laravel开发服务：停止php artisan serve后重新启动
• 重启Vue开发服务：停止npm run dev后重新启动

5. 确保域名一致性 #

避免混用localhost和127.0.0.1，Cookie是绑定域名的。确保Laravel服务启动时使用localhost:8000，前端请求也统一使用http://localhost:8000作为API地址。

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