RTK Query对接Laravel Sanctum出现CSRF令牌不匹配（请求已带Cookie）

核心原因 #

RTK Query不会像Axios那样自动把XSRF-TOKEN Cookie的值提取并设置为X-XSRF-TOKEN请求头，而Laravel Sanctum必须通过这个请求头验证CSRF令牌，这就是导致419错误的关键。

具体修复步骤 #

1. 给RTK Query的baseQuery添加CSRF头处理逻辑
   在创建API切片的文件中，修改fetchBaseQuery配置，手动从Cookie中提取XSRF-TOKEN并注入请求头：

   import { fetchBaseQuery } from '@reduxjs/toolkit/query/react';
   
   // 从Cookie中提取指定值的工具函数
   const getCookie = (name) => {
     const value = `; ${document.cookie}`;
     const parts = value.split(`; ${name}=`);
     if (parts.length === 2) return parts.pop().split(';').shift();
   };
   
   const baseQuery = fetchBaseQuery({
     baseUrl: '/api', // 替换为你的API基础路径
     credentials: 'include', // 确保请求携带Cookie
     prepareHeaders: (headers) => {
       const xsrfToken = getCookie('XSRF-TOKEN');
       if (xsrfToken) {
         headers.set('X-XSRF-TOKEN', xsrfToken);
       }
       return headers;
     },
   });
   

2. 确认接口调用顺序和配置

   • 登录按钮点击事件中，必须等待initCsrf接口请求完成后，再调用loginUser接口
   • initCsrf接口要确保启用credentials: 'include'，示例定义：

     export const apiSlice = createApi({
       reducerPath: 'api',
       baseQuery,
       endpoints: (builder) => ({
         initCsrf: builder.query({
           query: () => ({
             url: '/sanctum/csrf-cookie',
             method: 'GET',
             credentials: 'include',
           }),
         }),
         loginUser: builder.mutation({
           query: (credentials) => ({
             url: '/login',
             method: 'POST',
             body: credentials,
           }),
         }),
       }),
     });
     

3. 校验Laravel后端配置

   • 确保.env文件中SANCTUM_STATEFUL_DOMAINS包含你的SPA域名（如localhost:3000）
   • 检查config/cors.php，将supports_credentials设为true，allowed_origins包含SPA域名

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