Django与React跨域部署后Cookie无法传递的解决方案咨询

1. 调整Django的Cookie配置 #

由于前后端属于跨域场景（不同Vercel域名），当前SameSite=Lax的Cookie在跨域GET请求中不会被浏览器发送，必须修改为None并开启Secure属性（HTTPS环境强制要求）：

# settings.py
# 会话Cookie配置
SESSION_COOKIE_SAMESITE = 'None'
SESSION_COOKIE_SECURE = True
# CSRF Cookie配置
CSRF_COOKIE_SAMESITE = 'None'
CSRF_COOKIE_SECURE = True

2. 配置Django的CORS规则 #

安装django-cors-headers并配置允许前端域名携带凭证：

# settings.py
INSTALLED_APPS = [
    # 其他应用...
    'corsheaders',
]

MIDDLEWARE = [
    # 必须放在CommonMiddleware之前
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 其他中间件...
]

# 允许你的前端域名跨域请求
CORS_ALLOWED_ORIGINS = [
    "https://myproject.vercel.app",
]

# 允许跨域携带凭证（关键）
CORS_ALLOW_CREDENTIALS = True

3. 修正前端请求配置 #

• 替换相对路径为后端完整域名：前后端域名不同，相对路径会指向前端域名，必须使用后端完整URL发起请求。
• 简化凭证配置：Axios中只需设置withCredentials: true，无需重复设置credentials: 'include'（两者作用重复，可能导致冲突）。

修正后的请求代码：

useEffect(() => {
client
.get("https://mybackendproject.vercel.app/api/user", { 
  withCredentials: true,
  headers: {
    "X-CSRFToken": Cookies.get("csrftoken"),
  },})
  .then(function (res) {
    setCurrentUser(true);
  })
  .catch(function (error) {
    console.log(Cookies.get("csrftoken"));
    setCurrentUser(false);
  });
}, []);

4. 验证Vercel部署的Django会话存储 #

Vercel是无服务器环境，确保Django使用数据库存储会话（默认配置即可），不要使用文件系统存储：

# settings.py
SESSION_ENGINE = 'django.contrib.sessions.backends.db'

5. 浏览器端验证 #

• 清除浏览器缓存和现有Cookie，重新登录后端获取新的Cookie。
• 在开发者工具Network面板中检查：
  • 请求的Request Headers是否包含Cookie字段；
  • 登录接口的Response Headers中Set-Cookie是否包含SameSite=None; Secure属性。

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