Next.js+Redux RTK Query中浏览器Cookie存储异常：无法获取Django CSRF Token

我正在开发一个以Django为后端的项目，需通过API Cookie获取CSRF Token（Postman中可正常获取，见对应截图）。我使用Redux RTK Query实现请求，代码如下：

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

export const TestApi = createApi({
  reducerPath: "TestApi",
  baseQuery: fetchBaseQuery({
    baseUrl: process.env.NEXT_PUBLIC_API_URL,
    credentials: "include",
  }),
  tagTypes: ["TestApi"],
  endpoints: (builder) => ({
    getTestData: builder.query({
      query: () => "/user/csrf_cookie",
      providesTags: ["TestApi"],
    }),
  }),
});

export const { useGetTestDataQuery } = TestApi;

API已返回对应内容（见截图），但浏览器Cookie区域无数据（见Cookie截图），请求解决该问题。

• 检查Django的CSRF Cookie核心配置
  确认settings.py中的关键参数：

  • CSRF_COOKIE_SECURE：HTTPS环境设为True，本地HTTP开发设为False
  • CSRF_COOKIE_SAMESITE：跨域场景必须设为'None'，且需配合CSRF_COOKIE_SECURE=True（浏览器强制要求SameSite=None的Cookie为Secure）
  • CSRF_COOKIE_DOMAIN：跨域时设置为前端可访问的域名，例如.yourdomain.com（适配子域名）

• 验证CORS配置（django-cors-headers）
  确保以下配置正确：

  • CORS_ALLOW_CREDENTIALS = True（开启后浏览器才会保存跨域Cookie）
  • CORS_ALLOWED_ORIGINS明确指定前端域名，如["http://localhost:3000"]
  • 禁止同时设置CORS_ALLOW_ALL_ORIGINS = True和CORS_ALLOW_CREDENTIALS = True，这会触发浏览器安全限制，拒绝保存Cookie

• 确认RTK Query与浏览器环境

  • 你的代码中credentials: "include"配置正确，需确保前后端域名一致（比如都用localhost，不要混用127.0.0.1）
  • 关闭浏览器隐私模式测试，部分浏览器在隐私模式下默认禁用第三方Cookie

• 检查Response Headers中的Set-Cookie属性
  在浏览器Network面板查看/user/csrf_cookie请求的响应头，确认Set-Cookie包含：

  • Secure（HTTPS环境）
  • SameSite=None（跨域场景）
  • 正确的Domain值
    缺失任何一项都会导致浏览器拒绝保存Cookie

• 修正Django视图配置
  使用ensure_csrf_cookie装饰器确保视图正确设置CSRF Cookie：

  from django.views.decorators.csrf import ensure_csrf_cookie
  from django.http import JsonResponse
  
  @ensure_csrf_cookie
  def csrf_cookie(request):
      return JsonResponse({"status": "success"})
  

内容的提问来源于stack exchange，提问作者Abdur Rehman Khalid