如何在RTK Query中处理CSRF？如何获取XSRF-token？

RTK Query 基于原生 fetch API，而 fetch 不像 Angular HttpClient 那样自动处理 XSRF 令牌，需要手动配置以下步骤来实现：

1. 从Cookie中提取XSRF令牌 #

由于你的 XSRF-token 不是 HttpOnly 的，可以直接通过 document.cookie 解析获取：

const getXsrfToken = () => {
  // 从Cookie字符串中拆分并提取XSRF-token
  const xsrfCookie = document.cookie.split('; ').find(row => row.startsWith('XSRF-token='));
  return xsrfCookie ? xsrfCookie.split('=')[1] : '';
};

2. 在RTK Query的Base Query中自动注入令牌 #

通过 fetchBaseQuery 的 prepareHeaders 配置，将提取到的令牌添加到请求头中（注意头名称要和后端要求的一致，通常是 X-XSRF-TOKEN 或 XSRF-TOKEN）：

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

const api = createApi({
  baseQuery: fetchBaseQuery({
    baseUrl: '/your-api-base-url',
    credentials: 'include', // 确保发送Cookie
    prepareHeaders: (headers) => {
      const token = getXsrfToken();
      if (token) {
        headers.set('X-XSRF-TOKEN', token);
      }
      return headers;
    },
  }),
  endpoints: (builder) => ({
    // 这里定义你的API端点，比如：
    updateData: builder.mutation({
      query: (data) => ({
        url: '/data',
        method: 'PUT',
        body: data,
      }),
    }),
  }),
});

export const { useUpdateDataMutation } = api;

关键注意事项 #

• Cookie 有效性：确保后端设置的 XSRF-token Cookie 的 domain 和 path 与前端页面匹配，否则前端无法读取到该Cookie。
• CORS 配置：如果是跨域请求，后端必须设置 Access-Control-Allow-Credentials: true，且 Access-Control-Allow-Origin 不能为 *，需指定具体的前端域名。
• 令牌初始化：部分后端会在首次GET请求时返回XSRF令牌Cookie，因此需要确保前端页面加载时已触发过这类请求（比如获取页面初始数据），后续的修改请求（POST/PUT/DELETE）才能拿到令牌。

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