React调用Django API时出现CSRF Cookie未设置错误求助

核心问题分析 #

当前错误是因为前端发起POST请求时，Django未检测到有效的CSRF cookie或请求头，结合跨域场景（React与Django部署在不同环境），需从cookie获取、跨域配置、请求参数三个维度修复。

1. 确保CSRF Cookie被正确获取 #

• 前端发起POST请求前，必须先通过GET请求访问带@ensure_csrf_cookie装饰器的接口（比如你的signin接口），触发Django设置csrftoken cookie。如果直接发POST，前端还没拿到cookie，自然无法携带。
• 确认前端使用的Cookies库（如js-cookie）已正确引入，代码中Cookies.get('csrftoken')能正常读取到cookie值。

2. 修正跨域相关配置 #

Django端配置：

1. 安装跨域支持库：

   pip install django-cors-headers
   

2. 修改settings.py：

   # 加入INSTALLED_APPS
   INSTALLED_APPS = [
       ...
       'corsheaders',
   ]
   
   # 调整MIDDLEWARE顺序，CorsMiddleware要放在CsrfViewMiddleware之前
   MIDDLEWARE = [
       'corsheaders.middleware.CorsMiddleware',
       'django.middleware.common.CommonMiddleware',
       'django.middleware.csrf.CsrfViewMiddleware',
       ...
   ]
   
   # 允许前端域名/IP跨域请求
   CORS_ALLOWED_ORIGINS = [
       "http://<你的React前端地址>",  # 例如React本地调试时填"http://localhost:3000"
   ]
   
   # 允许请求携带cookie（关键）
   CORS_ALLOW_CREDENTIALS = True
   

前端请求URL修正：

将相对路径改为Django服务的绝对路径，避免跨域路径解析错误：

// 替换<你的公网IP>为实际EC2公网IP
const response = await fetch("http://<你的公网IP>:8000/api/signinUser", {
  // ...其他参数
});

3. 调整Fetch请求参数 #

跨域请求时，必须显式设置credentials: 'include'，让浏览器自动携带cookie：

const headers = new Headers({
    "X-CSRFToken": Cookies.get('csrftoken')
}); 
const response = await fetch("http://<你的公网IP>:8000/api/signinUser",
      {
        method: "POST",
        headers: headers,
        body: formData,
        credentials: 'include'  // 新增此行，确保携带cookie
      });     

4. 验证URL映射一致性 #

检查Django的urls.py，确保视图路径与前端请求路径完全匹配：

from django.urls import path
from .views import signin

urlpatterns = [
    ...
    path('api/signinUser', signin, name='signin'),
]

5. 调试排查步骤 #

打开浏览器开发者工具（F12）→ Network标签：

• 先发送一次GET请求到/api/signinUser，查看Response Headers中是否有Set-Cookie: csrftoken=xxx；
• 查看POST请求的Request Headers：
  • 是否包含Cookie: csrftoken=xxx；
  • 是否包含X-CSRFToken: xxx；
• 如果cookie未携带，检查CORS_ALLOW_CREDENTIALS和credentials参数是否正确设置。

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