Django+React HTTPS部署后Set-Cookie存在但CSRF/Session Cookie未写入

跨域场景下Django+React部署出现该问题，按以下优先级排查配置即可：

1. 补全前端请求的凭证配置 #

这是最高发的漏配项：跨域请求必须显式声明携带凭证，否则浏览器默认忽略返回的Set-Cookie头，不会写入Cookie存储。

• 若使用axios，添加全局配置：

axios.defaults.withCredentials = true

• 若使用原生fetch，请求参数中添加凭证配置：

fetch(apiUrl, {
  credentials: 'include'
  // 其余请求参数
})

注意：开启凭证携带后，跨域响应的Access-Control-Allow-Origin绝对不能设为通配符*，你当前Django侧CORS已配置具体允许源，这部分符合要求，无需修改。

2. 校验Cookie属性合法性 #

你已配置SameSite=None，该属性强制要求同时开启CSRF_COOKIE_SECURE = True、SESSION_COOKIE_SECURE = True，这部分配置正确，还需补充两个校验：

• 显式配置Cookie路径为根路径，避免路径不匹配导致写入失败，在settings.py中添加：

CSRF_COOKIE_PATH = '/'
SESSION_COOKIE_PATH = '/'

• 不要手动设置CSRF_COOKIE_DOMAIN、SESSION_COOKIE_DOMAIN：跨域场景下Django默认会将Cookie绑定到后端服务自身域名，手动指定域名反而会因域名不匹配被浏览器拒收。
• 检查Set-Cookie头是否携带__Host-前缀：如果带该前缀，必须满足Path=/、不指定Domain属性两个要求，否则浏览器直接拒绝写入。

3. 校验CSRF信任源完全匹配 #

CSRF_TRUSTED_ORIGINS要求配置值和请求的Origin头完全一致，包含协议、域名，不能带末尾斜杠：

• 确认配置的https://xxxx.cloudfront.net和实际前端访问地址完全匹配，若前端有其他子域名（比如带www），需要一并加入列表。
• 列表中仅需添加前端源地址，不要加后端API Gateway的地址。

4. 排查AWS架构的头篡改问题 #

你使用CloudFront+API Gateway部署，需要确认两个服务的配置没有破坏Set-Cookie格式：

• 检查API Gateway响应配置：部分默认部署模板会过滤或覆写响应头，虽然你能在网络面板看到Set-Cookie字段，要确认字段内的SameSite、Secure属性和Django配置一致，没有被网关自动改成冲突值。
• 如果你用Lambda+API Gateway的Serverless架构部署Django（比如用Zappa、Serverless Framework），必须开启API Gateway的multiValueHeaders配置，否则多个Set-Cookie头会被截断、格式错误，导致浏览器无法解析。

5. 排查第三方Cookie拦截 #

新版本Chrome、Edge默认开启第三方Cookie拦截，由于你前后端不同源，后端返回的Cookie属于前端站点下的第三方Cookie，会被默认拦截。

• 临时验证可关闭浏览器的第三方Cookie拦截，刷新页面测试Cookie是否正常写入。生产环境建议将前后端部署在同一根域名下（比如前端用app.example.com，后端用api.example.com），将Cookie域设为根域名，即可规避第三方Cookie拦截问题。

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