如何使用Redux Toolkit Query获取响应头中的x-csrftoken？

问题原因 #

1. RTKQ的fetchBaseQuery返回的meta.response.headers是浏览器原生Headers对象，不能像普通JS对象那样通过属性访问取值，必须用get()方法。
2. 跨域请求时，Django默认不会暴露自定义响应头x-csrftoken，浏览器会限制前端访问这类非CORS安全头。

解决方案 #

1. 修正RTKQ中获取响应头的代码 #

修改baseQueryWithReauth里获取x-csrftoken的方式，使用Headers.get()方法，并添加可选链避免空值报错：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
import { setCredentials, setCSRFToken, logOut } from '../../features/auth/authSlice'

const baseQuery = fetchBaseQuery({
    baseUrl: 'http://127.0.0.1:8000/api',
    credentials: 'include',
    prepareHeaders: (headers, { getState }) => {
        const token = getState().auth.token
        if (token) {
            headers.set("Authorization", `Bearer ${token}`)
        }
        return headers
    },
})

const baseQueryWithReauth = async (args, api, extraOptions) => {
    const result = await baseQuery(args, api, extraOptions);
    // 使用Headers.get()方法获取响应头，添加可选链防止报错
    const xcsrftoken = result.meta?.response?.headers.get('x-csrftoken');
    if (xcsrftoken) {
        api.dispatch(setCSRFToken(xcsrftoken));
    }
    return result
}

export const apiSlice = createApi({
    baseQuery: baseQueryWithReauth,
    endpoints: builder => ({})
})

2. 配置Django后端暴露x-csrftoken响应头 #

在Django项目的settings.py中添加CORS配置，允许暴露x-csrftoken头：

# settings.py
# 确保已安装并启用django-cors-headers
INSTALLED_APPS = [
    # ...其他应用
    'corsheaders',
]

MIDDLEWARE = [
    # ...其他中间件
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
]

# 允许你的React前端域名跨域请求
CORS_ORIGIN_WHITELIST = [
    "http://localhost:3000",  # 替换为你的前端实际地址
]

# 暴露自定义响应头，让前端可以访问x-csrftoken
CORS_EXPOSE_HEADERS = ['x-csrftoken']

额外说明 #

• 如果是同域请求，CORS配置可以省略，但仍需使用Headers.get()方法获取响应头。
• 可选链操作符?.用于避免result.meta或result.meta.response为空时抛出错误，提升代码健壮性。

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