React设置axios withCredentials仍无法接收Django JWT登录Cookie

问题前置说明 #

前后端分离开发模式下，Django DRF 实现登录接口校验通过后手动生成JWT，通过set_cookie下发带HttpOnly属性的Cookie；前端React端使用axios发登录请求时已配置withCredentials: true，但始终无法接收后端下发的Cookie，控制台报CORS相关拦截错误。

核心排查与解决步骤 #

• 检查Django跨域组件的配置完整性
  1. 确认已正确安装django-cors-headers并完成基础挂载，最容易遗漏的配置是必须显式开启CORS_ALLOW_CREDENTIALS = True——该配置用于允许跨域请求携带凭证（Cookie、HTTP认证信息），缺失该配置时，即便前端开启了withCredentials，浏览器也会直接拦截后端返回的Set-Cookie响应。
  2. 跨域带凭证的场景下，禁止使用通配符*匹配允许的源：如果设置了CORS_ALLOW_ALL_ORIGINS = True，django-cors-headers会自动把响应头的Access-Control-Allow-Origin替换为实际请求的源地址，符合规范；如果是手动配置CORS_ALLOWED_ORIGINS列表，必须把前端开发服务的实际源地址（比如http://localhost:3000、http://127.0.0.1:3000）逐行加进列表，绝对不能写*，否则会触发浏览器的安全拦截。
  3. 检查中间件挂载顺序，确保corsheaders.middleware.CorsMiddleware放在django.middleware.common.CommonMiddleware之前，否则跨域响应头不会被正确注入。
• 检查Cookie设置的属性合规性
  1. 本地HTTP开发环境下，给set_cookie方法补充samesite='Lax'参数，现代浏览器默认的SameSite策略会拦截跨端口的同域Cookie下发；注意不要在HTTP环境下设置samesite='None'，该配置要求必须搭配secure=True且使用HTTPS协议，否则Cookie会被浏览器直接丢弃。
  2. 不要手动给Cookie指定不匹配的domain参数，本地开发时保持domain默认值即可，确保Cookie的所属域名和后端接口的访问域名完全匹配。
• 排查前端请求的细节问题
  1. 移除请求URL末尾的多余空格：代码中登录接口地址http://127.0.0.1:8000/user/login 末尾带了空格，会导致路由匹配失败返回404，连带触发CORS校验失败。
  2. 确认axios的withCredentials配置没有被全局规则覆盖：如果项目中配置了axios全局实例，要确保全局实例的withCredentials也设为true，避免单请求配置被覆盖。

验证方式 #

配置完成后打开浏览器开发者工具的网络面板，找到登录接口的响应内容，确认满足三个条件即代表配置生效：

• 响应头包含Access-Control-Allow-Credentials: true
• 响应头的Access-Control-Allow-Origin是前端实际的访问源地址，不是通配符*
• 响应头存在完整的Set-Cookie字段

注意：带HttpOnly属性的Cookie本身就不允许前端JS通过document.cookie读取，不要因为前端代码读不到Cookie值就判定配置失败，只要网络面板看到Set-Cookie返回正常，后续跨域请求会自动携带该Cookie即可。

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