前后端跨域部署后Next.js前端无Cookie问题求助

一、Django端配置调整 #

1. 补充Cookie跨域核心配置
   你的现有配置缺少Cookie跨域传递的关键参数，需在settings.py中添加：

   # 允许跨域传递Cookie，必须配合Secure属性使用
   CSRF_COOKIE_SAMESITE = 'None'
   SESSION_COOKIE_SAMESITE = 'None'
   # 保留已有的HTTPS强制配置
   CSRF_COOKIE_SECURE = True
   SESSION_COOKIE_SECURE = True
   

   说明：SameSite=None是跨域场景下Cookie能被浏览器携带的必要设置，Secure属性确保Cookie仅通过HTTPS传输，符合现代浏览器安全规则。

2. 优化CORS配置（可选但更安全）
   虽然CORS_ORIGIN_ALLOW_ALL = True能快速允许所有源，但生产环境建议明确指定允许的前端域名：

   CORS_ORIGIN_WHITELIST = [
       "https://FRONTENDURL",
       "https://*.FRONTENDURL",
   ]
   # 保留已有的允许携带凭证配置
   CORS_ALLOW_CREDENTIALS = True
   

3. 验证CSRF信任源
   确保CSRF_TRUSTED_ORIGINS中的域名与生产环境前端实际域名完全匹配，包含完整的HTTPS协议头，若前端使用非标准端口需一并添加。

二、Next.js前端请求调整 #

1. HTTP请求库开启凭证携带
   若使用Axios发送请求，需开启withCredentials：

   import axios from 'axios';
   
   const apiClient = axios.create({
     baseURL: 'https://BACKENDURL',
     withCredentials: true, // 关键：允许请求携带Cookie
   });
   

   若使用原生fetch，则需添加credentials: 'include'参数：

   fetch('https://BACKENDURL/api/xxx', {
     method: 'POST',
     credentials: 'include',
     // 其他请求参数
   });
   

2. Next.js API路由转发处理（若使用）
   若通过Next.js的API路由转发后端请求，需在路由中设置跨域响应头：

   export default async function handler(req, res) {
     res.setHeader('Access-Control-Allow-Credentials', 'true');
     res.setHeader('Access-Control-Allow-Origin', req.headers.origin);
     // 后续请求转发逻辑
   }
   

三、生产环境额外检查 #

• 确认前后端均使用HTTPS：Secure属性要求Cookie仅在HTTPS环境下传输，HTTP环境会被浏览器直接拒绝存储。
• 查看浏览器控制台：在Application标签下检查Cookie的SameSite和Secure标记是否符合配置，若未生效需重启Django服务。
• 排除浏览器安全限制：避免使用自签名SSL证书，此类证书可能被浏览器判定为不安全，导致Cookie无法正常存储。

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