如何在Next.js中获取Laravel的CSRF值？解决419请求失败问题

一、先把Laravel Sanctum的核心配置拉到位 #

• 编辑config/sanctum.php：确保stateful数组包含你的Next.js前端域名，本地开发示例：

  'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf(
      '%s%s',
      'localhost,localhost:3000,127.0.0.1,127.0.0.1:8000,::1',
      env('APP_URL') ? ','.parse_url(env('APP_URL'), PHP_URL_HOST) : ''
  ))),
  

  生产环境直接把前端域名加进去，比如your-frontend.com,admin.your-frontend.com。

• 配置.env文件：

  • SESSION_DOMAIN：本地设为localhost，生产环境设为主域名（比如.your-domain.com，带前缀点让子域名也能共享会话）。
  • SANCTUM_STATEFUL_DOMAINS：直接指定前端域名，比如localhost:3000，和sanctum.php里的配置保持一致。
  • APP_URL：填Laravel后端的完整地址，本地是http://localhost:8000，生产环境用实际后端域名。

二、Next.js端Axios配置不能错 #

• 全局配置Axios，必须开withCredentials，不然带不了Cookie：

  import axios from 'axios';
  
  const api = axios.create({
    baseURL: 'http://localhost:8000', // 替换成你的后端地址
    withCredentials: true,
  });
  
  export default api;
  

• 发送请求前必须先拿CSRF Cookie：/sanctum/csrf-cookie接口不会返回令牌，但会把XSRF-TOKEN写入Cookie，Axios会自动携带这个Cookie并生成X-XSRF-TOKEN请求头。示例代码：

  import api from './api';
  
  const submitForm = async (formData) => {
    // 先获取CSRF Cookie
    await api.get('/sanctum/csrf-cookie');
    // 再发POST请求
    try {
      const res = await api.post('/api/your-form-endpoint', formData);
      console.log(res.data);
    } catch (err) {
      console.error(err);
    }
  };
  

• 注意：Next.js的App Router里，要在客户端组件（加'use client'指令）里发请求，服务器组件没法处理Cookie。

三、Laravel路由和中间件别搞混 #

• 你的API路由放在routes/api.php里就行，默认用api中间件组。要给api中间件组加上Sanctum的状态验证中间件，编辑app/Http/Kernel.php：

  'api' => [
      \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
      'throttle:api',
      \Illuminate\Routing\Middleware\SubstituteBindings::class,
  ],
  

  这个中间件会自动处理SPA的CSRF验证，不要给api路由加web中间件，会导致中间件冲突。

四、踩过的坑要避开 #

• 之前改了VerifyCsrfToken.php的话，恢复默认设置，Sanctum的中间件已经管了CSRF，不需要手动改这个文件。
• 本地开发时，浏览器要允许第三方Cookie（localhost:3000和localhost:8000属于不同端口，浏览器算跨站）。
• 看浏览器Network面板：先查/sanctum/csrf-cookie的响应头，有没有Set-Cookie带XSRF-TOKEN和laravel_session；再查POST请求的请求头，有没有带Cookie和X-XSRF-TOKEN。
• 执行php artisan config:clear清除配置缓存，然后重启Laravel服务器。

五、验证步骤 #

1. 清Laravel缓存：php artisan config:clear && php artisan serve
2. 清浏览器缓存和Cookie，刷新页面。
3. 打开Network面板，先触发/sanctum/csrf-cookie请求，确认Cookie已设置。
4. 提交表单，看POST请求的状态码是否200，没有419。

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