生产环境React Fetch请求Express后端Cookie无法保存问题

问题描述 #

生产环境中，React通过Fetch向Express后端发送CORS认证请求，后端响应已返回Cookie头，但浏览器未保存新生成的Cookie；后续发起请求时，浏览器反而携带旧的Cookie。开发环境无此问题，已尝试配置credentials:'include'、sameSite: 'none'、secure、httpOnly及domain但未解决。

排查与解决步骤 #

1. 修复后端CORS的origin配置

生产环境下绝对不能使用通配符*作为CORS的origin，因为credentials:'include'与通配符origin不兼容，浏览器会直接拒绝保存Cookie。必须明确指定前端的生产域名：

// Express CORS中间件配置示例
const cors = require('cors');
app.use(cors({
  origin: 'https://your-production-frontend-domain.com', // 替换为实际前端域名
  credentials: true // 必须开启，允许跨域携带Cookie
}));

如果后端使用反向代理（如Nginx），需确保代理传递了正确的Origin请求头。

2. 完善Cookie的domain与安全配置

生产环境下，Cookie的domain需设置为前后端共同的父域名（如前端是app.yourdomain.com，后端是api.yourdomain.com，则domain为.yourdomain.com），同时补充httpOnly增强安全性：

// 后端生产环境Cookie配置修改
if (process.env.NODE_ENV === "production") {
  res.cookie('token', token, {
    expires: new Date(Date.now() + 864000000),
    sameSite: 'none',
    secure: true,
    httpOnly: true, // 防止XSS攻击，建议强制添加
    domain: '.yourdomain.com' // 替换为实际父域名，注意开头的点
  });
} else {
  res.cookie('token', token, {
    expires: new Date(Date.now() + 864000000),
    sameSite: 'none',
    httpOnly: true
  });
}

3. 确保HTTPS与代理信任配置

secure: true要求请求必须通过HTTPS：

• 生产环境前后端必须启用HTTPS；
• 如果后端通过Nginx反向代理提供HTTPS，需让Express信任代理的HTTPS头：

  app.set('trust proxy', true); // 让Express识别反向代理传递的HTTPS标识
  

4. 验证前端Fetch配置的正确性

确认生产环境下Fetch请求的credentials:'include'生效：

• 打开浏览器开发者工具的Network面板，查看请求头的Credentials字段是否为include；
• 检查请求的Origin是否与后端CORS配置的origin完全一致（包括协议、域名，HTTPS下端口可省略）。

5. 清除旧Cookie干扰

手动清除浏览器中该域名下的旧Cookie，避免旧Cookie的domain或sameSite属性与新Cookie冲突，导致新Cookie无法保存。

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