Vue.js SPA对接Laravel Sanctum遇CSRF令牌不匹配问题求助

• 配置Session共享域名
  打开config/session.php，将domain配置项设置为前后端域名的父域（带前置点），比如前后端分别为backend.domain和external.app.domain，则修改为：

  'domain' => env('SESSION_DOMAIN', '.domain'),
  

  同时在.env文件中添加SESSION_DOMAIN=.domain，确保Cookie可在子域名间共享。

• 验证CSRF Cookie生成状态
  调用sanctum/csrf-cookie接口后，在Chrome开发者工具的Application > Cookies面板检查：

  • 是否存在XSRF-TOKEN和laravel_session两个Cookie
  • 确认它们的Domain为.domain、Path为/
  • laravel_session需带有HttpOnly标记，XSRF-TOKEN则不需要

• 确保Axios正确携带XSRF令牌
  除了设置withCredentials: true，可添加请求拦截器强制令牌携带逻辑：

  axios.interceptors.request.use(config => {
    const tokenMatch = document.cookie.match(/XSRF-TOKEN=([^;]+)/);
    if (tokenMatch) {
      config.headers['X-XSRF-TOKEN'] = decodeURIComponent(tokenMatch[1]);
    }
    return config;
  });
  

  同时确认登录请求使用POST方法，GET请求不会触发CSRF校验，但登录接口必须用POST。

• 修正CORS配置
  在config/cors.php中：

  • paths需包含/sanctum/csrf-cookie和/login
  • allowed_origins要明确设置为前端域名（如['https://external.app.domain']），不能使用通配符*（因为supports_credentials已设为true）

• 清除浏览器缓存与Cookie
  删除对应域名下的所有Cookie，避免旧缓存干扰，重新发起请求测试。

• 确认请求协议与域名一致性
  前端Axios的baseURL必须与后端地址完全一致（包括http/https协议），若后端启用HTTPS，前端也必须使用HTTPS，否则Cookie的Secure属性会导致无法携带。

• 配置反向代理信任（若后端使用代理）
  如果后端部署在Nginx等反向代理后，修改app/Http/Middleware/TrustProxies.php：

  protected $proxies = '*';
  protected $headers = Request::HEADER_X_FORWARDED_FOR | Request::HEADER_X_FORWARDED_HOST | Request::HEADER_X_FORWARDED_PORT | Request::HEADER_X_FORWARDED_PROTO;
  

  确保Laravel能正确识别前端真实请求来源。

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