Laravel Sanctum+NextJS：如何用RTK Query处理CSRF Cookie请求？

完全可以在createApi()中通过自定义baseQuery集成Sanctum的CSRF Cookie获取与携带逻辑，无需依赖Axios。核心思路是在发送需要CSRF防护的请求前，自动触发/sanctum/csrf-cookie请求，并将提取到的CSRF Token附加到后续请求头中。

1. 自定义BaseQuery实现CSRF逻辑 #

编写自定义baseQuery函数，替代RTK Query默认的fetchBaseQuery，内置CSRF处理逻辑：

import { fetchBaseQuery } from '@reduxjs/toolkit/query/react';

const customBaseQuery = async (args, api, extraOptions) => {
  const baseQuery = fetchBaseQuery({
    baseUrl: 'https://your-laravel-api-domain.com',
    credentials: 'include', // 关键：允许携带Cookie，Sanctum依赖此配置
  });

  // 判断是否需要CSRF防护：Sanctum默认只保护非GET请求
  const requiresCsrf = typeof args === 'string' 
    ? !args.startsWith('GET') 
    : args.method?.toUpperCase() !== 'GET';

  if (requiresCsrf) {
    // 先请求CSRF Cookie接口，初始化防护
    await baseQuery('/sanctum/csrf-cookie', api, extraOptions);
    
    // 从Cookie中提取XSRF-TOKEN（Laravel自动将Token存入该Cookie）
    const xsrfToken = document.cookie
      .split('; ')
      .find(row => row.startsWith('XSRF-TOKEN='))
      ?.split('=')[1];

    // 给原请求添加X-XSRF-TOKEN请求头
    const modifiedArgs = typeof args === 'string'
      ? { url: args, headers: { 'X-XSRF-TOKEN': decodeURIComponent(xsrfToken) } }
      : {
          ...args,
          headers: {
            ...args.headers,
            'X-XSRF-TOKEN': decodeURIComponent(xsrfToken),
          },
        };

    // 发送处理后的请求
    return baseQuery(modifiedArgs, api, extraOptions);
  }

  // GET请求直接发送
  return baseQuery(args, api, extraOptions);
};

2. 在createApi中使用自定义BaseQuery #

将自定义baseQuery传入createApi，所有API请求会自动处理CSRF逻辑：

import { createApi } from '@reduxjs/toolkit/query/react';

export const apiSlice = createApi({
  reducerPath: 'api',
  baseQuery: customBaseQuery, // 绑定自定义baseQuery
  endpoints: (builder) => ({
    // 定义你的API端点示例
    login: builder.mutation({
      query: (credentials) => ({
        url: '/login',
        method: 'POST',
        body: credentials,
      }),
    }),
    fetchUser: builder.query({
      query: () => '/api/user',
    }),
  }),
});

export const { useLoginMutation, useFetchUserQuery } = apiSlice;

3. 关键注意事项 #

• 跨域配置：确保Laravel的config/cors.php中设置supports_credentials => true，并允许你的Next.js域名；Next.js端已通过credentials: 'include'支持Cookie跨域携带。
• 请求缓存优化：可添加缓存逻辑（比如记录上次CSRF请求时间，过期后再重新获取），避免每次非GET请求都调用/sanctum/csrf-cookie。
• Token解码：XSRF-TOKEN Cookie的值是URL编码的，需用decodeURIComponent()解码后再放入请求头。

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