Laravel Sanctum与Next.js 14 CSRF验证失败（419错误）求助

核心结论 #

Laravel与Next.js 14本身不存在兼容性问题，419错误的根源在于前端配置、路由中间件处理或请求执行环境的差异。以下是针对性排查和解决步骤：

1. 修正Axios配置冗余项 #

你的Axios配置中添加了多余的请求头，反而可能干扰CSRF Token的自动传递：

• Access-Control-Allow-Origin是后端返回的响应头，前端设置该请求头无效，直接删除。
• 显式配置Laravel Sanctum对应的CSRF Cookie和Header名称，确保Axios自动携带Token。

修改后的lib/axios.ts：

import Axios from "axios";

const axios = Axios.create({
  baseURL: process.env.NEXT_PUBLIC_BACKEND_URL,
  headers: {
    "Content-Type": "application/json",
    "X-Requested-With": "XMLHttpRequest"
  },
  withCredentials: true,
  // 新增：匹配Laravel Sanctum的CSRF配置
  xsrfCookieName: 'XSRF-TOKEN',
  xsrfHeaderName: 'X-XSRF-TOKEN',
});

export default axios;

2. 验证CSRF请求与登录请求的时序 #

虽然你调用了await csrf()，但需确认浏览器实际接收到并存储了CSRF Cookie：

1. 打开浏览器DevTools → Network标签
2. 触发登录流程，先查看/sanctum/csrf-cookie请求的响应头：
   • 确认存在Set-Cookie: XSRF-TOKEN=xxx; path=/; domain=localhost; ...
3. 再查看/login请求的请求头：
   • 确认存在X-XSRF-TOKEN: xxx（Axios应自动携带）

如果X-XSRF-TOKEN未出现在请求头中，说明Axios未正确读取Cookie，检查浏览器的Cookie存储是否禁用，或本地开发环境的域名/端口是否与Laravel配置一致。

3. 排查next-intl中间件的拦截影响 #

next-intl的路由中间件可能会处理所有请求，包括API和Sanctum路径，导致Cookie未正确传递：

• 打开middleware.ts（或你的中间件文件），确保将API和Sanctum路径排除在中间件处理之外：

import createMiddleware from 'next-intl/middleware';

export default createMiddleware({
  locales: ['en', 'zh'],
  defaultLocale: 'zh',
  // 排除不需要国际化处理的路径
  excludedPaths: ['/api/*', '/sanctum/*']
});

export const config = {
  matcher: ['/', '/(zh|en)/:path*']
};

如果未排除这些路径，中间件可能会修改请求上下文，导致CSRF Cookie无法在后续请求中被读取。

4. 确认LoginPage为客户端组件 #

Next.js 14的App Router中，默认组件是服务器组件。如果LoginPage是服务器组件，Axios请求会在服务器端发起，此时无法获取浏览器的Cookie存储，导致CSRF Token丢失：

• 在LoginPage的顶部添加'use client'指令，强制组件在客户端渲染：

'use client';

import { useAuth } from "@/hooks/auth";
// 其他组件代码

只有客户端组件发起的请求，才能正确读取和传递浏览器中的CSRF Cookie。

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