Laravel登录请求遇419错误：已存在XSRF-TOKEN仍报错

核心问题分析 #

• 自定义getCookie函数逻辑错误，无法正确提取XSRF-TOKEN的值
• 手动设置X-XSRF-TOKEN头部属于冗余操作，Axios可自动处理CSRF令牌的携带

解决方案步骤 #

1. 修复Cookie提取函数

替换错误的getCookie实现，确保能精准匹配目标Cookie：

const getCookie = (name) => {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
};

2. 简化Axios登录逻辑

利用Axios自动处理CSRF令牌的特性，删除手动设置X-XSRF-TOKEN的代码，并全局配置跨域凭证：

// 全局配置Axios，统一开启跨域凭证携带
axios.defaults.withCredentials = true;

const getCsrfToken = async () => {
  await axios.get("/sanctum/csrf-cookie");
};

const handleLogin = async (email, password) => {
  try {
    await getCsrfToken();

    const response = await axios.post(
      "http://localhost:8000/login",
      { email, password },
      {
        headers: {
          "Content-Type": "application/json",
          accept: "application/json"
        }
      }
    );

    if (response.status === 200) {
      checkAuth();
    }
  } catch (error) {
    console.error("Error during login:", error);
  }
};

3. 验证后端配置细节

• 确认routes/web.php中的/login路由已应用web中间件（Laravel默认Auth路由已包含该配置）
• 修正.env中的状态域配置（需包含前端端口）：

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

• 清除浏览器缓存与Cookie，重启Laravel服务（php artisan serve）和前端开发服务器

4. 调试验证

• 检查/sanctum/csrf-cookie请求是否返回204状态码
• 在浏览器Network面板中，确认登录请求的Request Headers已自动携带X-XSRF-TOKEN
• 查看Laravel日志（storage/logs/laravel.log），获取CSRF不匹配的具体原因

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