React+Laravel项目登录请求出现CSRF token mismatch错误

问题场景 #

React v18.2.0（部署于Hostinger网站）与Laravel v10.10（部署于Hostinger VPS）跨域项目中，仅登录POST请求返回419状态码并提示CSRF token mismatch；单独访问前后端URL正常，首页GET请求可获取数据；生产环境浏览器无任何Cookie，本地环境功能正常。

一、后端配置修正 #

1. .env文件核心调整 #

APP_URL=https://backend-domain
FRONTEND_URL=https://frontend-domain
SESSION_DRIVER=database
# SESSION_COOKIE改为标准Cookie名称（原配置错误设置为域名）
SESSION_COOKIE=laravel_session
# 移除HTTPS前缀，保留纯域名列表
SANCTUM_STATEFUL_DOMAINS=frontend-domain,backend-domain
# 设置为顶级域名（带前置点，适配同根域下的前后端子域名）
SESSION_DOMAIN=.your-root-domain.com
# HTTPS环境必须开启Secure Cookie（SameSite=None依赖此配置）
SESSION_SECURE_COOKIE=true

2. config/session.php关键配置验证 #

确保以下配置与.env同步：

'secure' => env('SESSION_SECURE_COOKIE', false),
'same_site' => 'none',
'domain' => env('SESSION_DOMAIN', null),

3. Kernel.php中间件顺序修正 #

EnsureFrontendRequestsAreStateful需放在StartSession之后，保证会话初始化后再处理状态验证：

protected $middlewareGroups = [
    'web' => [
        \App\Http\Middleware\EncryptCookies::class,
        \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
        \Illuminate\Session\Middleware\StartSession::class,
        \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
        \Illuminate\View\Middleware\ShareErrorsFromSession::class,
        \App\Http\Middleware\VerifyCsrfToken::class,
        \Illuminate\Routing\Middleware\SubstituteBindings::class,
        \App\Http\Middleware\LogCookies::class,
    ],

    'api' => [
        \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
        \Illuminate\Routing\Middleware\ThrottleRequests::class.':api',
        \Illuminate\Routing\Middleware\SubstituteBindings::class,
        \App\Http\Middleware\LogCookies::class,
    ],
];

4. 清除配置缓存 #

执行命令刷新Laravel缓存：

php artisan config:clear
php artisan cache:clear
php artisan route:clear

二、前端配置简化 #

Axios会自动从Cookie中读取XSRF-TOKEN并设置X-XSRF-TOKEN请求头，无需手动提取，简化登录逻辑：

const csrf = async () => {
  try {
    await axiosInstance.get("/sanctum/csrf-cookie");
  } catch (error) {
    console.error("Error fetching CSRF token:", error);
  }
};

const axiosInstance = axios.create({
  baseURL: 'https://backend-domain',
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
    'X-Requested-With': 'XMLHttpRequest',
  },
  withCredentials: true
});

const login = async ({ email, password }) => {
  await csrf();
  try {
    // 移除手动设置X-XSRF-TOKEN，依赖Axios自动处理
    const response = await axiosInstance.post("/login", { email, password });
    navigate("/admin/");
    await getUser();
  } catch (error) {
    console.error("Error during login:", error);
    if (error.response.status === 422) {
      setErrors(error.response.data.errors);
    } else if (error.response.status === 403) {
      console.error("Error:", error.response.data.message);
    }
  }
};

三、额外排查点 #

• 检查浏览器Application > Cookies，确认XSRF-TOKEN和laravel_session是否存在，Domain属性是否与配置一致
• 查看/sanctum/csrf-cookie请求的响应头，确认包含Set-Cookie且属性符合配置（Secure、SameSite=None、Domain正确）
• 验证Hostinger VPS防火墙未拦截Cookie相关响应头
• 确保前后端域名属于同一顶级域名（若SESSION_DOMAIN设为顶级域名），跨顶级域名需额外配置

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