React/Django跨域场景下HttpOnly Cookie无法被浏览器存储求助

问题描述 #

前端部署在Netlify，域名为app.mydomain.com；后端是基于Django Ninja的REST API，域名为api.mydomain.com。提交登录请求后，API成功返回访问密钥（已存入应用状态），同时返回一个以安全HttpOnly Cookie形式存在的刷新令牌。通过开发者工具能看到响应头中的Set-Cookie字段，但浏览器完全没有存储该Cookie。已完成常规跨域配置，问题仍未解决。

前端登录API调用代码 #

await fetch(
  AUTH_URL_OBTAIN,
  {
    method: RequestMethod.POST,
    headers: {"Content-Type": "application/json"},
    body: JSON.stringify({username: formData.email, password: formData.password}),
    credentials: "include",
  },
);

后端设置Cookie代码 #

response.set_cookie(
    key="refresh",
    value=refresh_token,
    expires=datetime.fromtimestamp(refresh_token_payload["exp"], timezone.utc),
    httponly=True,
    samesite="none",
    secure=True,
    path="/api/auth/web/token-refresh",
    domain=".mydomain.com",
)

Django相关配置 #

CSRF_TRUSTED_ORIGINS = ["https://app.mydomain.com"]
CORS_ALLOWED_ORIGINS = ["https://app.mydomain.com"]
CORS_ORIGIN_WHITELIST = ["https://app.mydomain.com"]
CORS_ALLOW_CREDENTIALS = True

登录响应头信息 #

Access-Control-Allow-Credentials: true

Access-Control-Allow-Origin: https://app.mydomain.com

Content-Length: 661

Content-Type: application/json; charset=utf-8

Cross-Origin-Opener-Policy: same-origin

Date: Thu, 06 Jun 2024 14:06:22 GMT

Referrer-Policy: same-origin

Server: daphne

Set-Cookie: refresh=ey...3uQ; Domain=.mydomain.com; expires=Sat, 06 Jul 2024 14:06:22 GMT; HttpOnly; Max-Age=2592000; Path=/api/auth/web/token-refresh; SameSite=none; Secure

Vary: origin

X-Content-Type-Options: nosniff

X-Frame-Options: DENY

排查建议 #

• 检查浏览器第三方Cookie限制：Chrome、Firefox等主流浏览器默认限制第三方Cookie，跨域子域名场景下可能被拦截。可切换至隐私模式测试，或在浏览器设置中临时允许该域名的第三方Cookie。
• 验证Domain属性：确认.mydomain.com拼写正确，主域名与前后端域名完全匹配，避免因域名格式错误导致Cookie无法存储。
• 调整Path属性测试：当前Cookie的path设置为/api/auth/web/token-refresh，虽不影响存储，但可临时改为/，排除路径规则导致的存储异常。
• 清理冗余CORS配置：CORS_ORIGIN_WHITELIST在新版Django CORS Headers中已被CORS_ALLOWED_ORIGINS替代，保留其中一个即可，避免配置冲突。
• 检查Cookie面板位置：HttpOnly Cookie无法通过JS读取，但可在开发者工具的Application > Cookies下查看，注意查看.mydomain.com主域名而非api.mydomain.com子域名下的Cookie列表。
• 简化场景测试：临时移除httponly=True（仅测试用，后续需恢复），查看Cookie是否能存储，排除HttpOnly属性的影响；或用Postman发送请求，确认服务器端Set-Cookie逻辑是否正常。

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