React调用API时Cookie未在浏览器设置，但Django REST Framework测试正常

根本原因 #

这是**跨域资源共享(CORS)**的同源策略限制导致的：

• Django REST Framework的测试页面和后端属于同域（比如都在localhost:8000），浏览器允许正常设置Cookie；
• React应用通常运行在不同端口/域名（比如localhost:3000），属于跨域请求，浏览器默认会阻止跨域请求的Cookie存储，除非后端和前端都配置了正确的跨域凭证参数。

解决方案 #

1. Django端配置（核心）

首先需要通过django-cors-headers库处理跨域：

• 安装依赖：

  pip install django-cors-headers
  

• 修改settings.py，添加跨域配置：

  # 加入INSTALLED_APPS
  INSTALLED_APPS = [
      ...
      'corsheaders',
      ...
  ]
  
  # 加入中间件（注意顺序，CorsMiddleware要放在CommonMiddleware之前）
  MIDDLEWARE = [
      ...
      'corsheaders.middleware.CorsMiddleware',
      'django.middleware.common.CommonMiddleware',
      ...
  ]
  
  # 允许你的React应用域名/端口
  CORS_ALLOWED_ORIGINS = [
      "http://localhost:3000",  # 开发环境地址，生产环境替换为实际域名
  ]
  
  # 允许跨域请求携带Cookie
  CORS_ALLOW_CREDENTIALS = True
  

• 完善Cookie设置参数：
  你的set_cookie需要补充samesite和secure参数，适配跨域场景：

  response.set_cookie(
      'my_cookie',
      'my_value',
      httponly=True,
      secure=not settings.DEBUG,  # 生产环境HTTPS下必须设为True
      samesite='Lax',  # 若需要跨域第三方请求，可设为'None'（需配合secure=True）
      max_age=3600  # 可选，设置Cookie有效期（秒）
  )
  

• 额外注意：你的JWT密钥os.urandom(32).hex()会在每次后端重启时生成新值，导致之前的Token全部失效，建议改为从环境变量读取固定密钥：

  import os
  secret_key = os.getenv('JWT_SECRET_KEY')  # 提前生成好密钥并存入环境变量
  token = jwt.encode(payload, secret_key, algorithm='HS256')
  

2. React端配置

发送请求时必须明确携带凭证参数：

• Axios示例：

  import axios from 'axios';
  
  axios.post('http://localhost:8000/api/login/', {
    id_Patient: 你的用户ID,
    password: 你的密码
  }, {
    withCredentials: true  // 关键：允许携带Cookie
  })
  .then(res => console.log(res))
  .catch(err => console.error(err));
  

• Fetch示例：

  fetch('http://localhost:8000/api/login/', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      id_Patient: 你的用户ID,
      password: 你的密码
    }),
    credentials: 'include'  // 关键：允许携带Cookie
  })
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));
  

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