Express+React部署至DigitalOcean后Cookie无法在浏览器存储求助

问题核心 #

你的前后端部署在DigitalOcean的两个独立App域名下，属于跨域场景。浏览器的安全策略会拦截不符合要求的Cookie存储，哪怕响应头里能看到Set-Cookie。本地环境因为是同域（比如localhost）所以没问题，部署后跨域就触发了限制。

必须修复的几个点 #

1. 后端Cookie配置补全跨域属性 #

Express设置Cookie时，必须包含以下关键属性，缺一不可：

• domain: 设为.ondigitalocean.app（两个子域名共享的根域，前面的点兼容旧浏览器）
• sameSite: 跨域场景必须设为"None"，同时强制secure: true（DigitalOcean App都是HTTPS，符合要求）
• path: 设为"/"确保全站有效
• httpOnly: 如果你不需要前端JS读取Cookie可以保留（更安全），否则去掉

示例代码：

res.cookie('auth_token', userToken, {
  maxAge: 7 * 24 * 60 * 60 * 1000, // 7天有效期
  domain: ".ondigitalocean.app",
  sameSite: "None",
  secure: true,
  httpOnly: true,
  path: "/"
});

2. 后端CORS配置必须允许凭证 #

CORS中间件不能用*作为origin，必须指定你的前端域名，同时开启credentials: true：

const cors = require('cors');
const corsConfig = {
  origin: "https://dev-frontend-f2yv7.ondigitalocean.app",
  credentials: true,
  allowedHeaders: ["Content-Type", "Authorization"],
  methods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"]
};
app.use(cors(corsConfig));
// 针对OPTIONS请求单独处理（有些框架需要）
app.options('*', cors(corsConfig));

3. 前端请求强制携带凭证 #

不管用Axios还是Fetch，都要显式设置携带凭证：

• Axios：

axios.post('https://sea-lion-app-rm8kh.ondigitalocean.app/api/auth/login', loginData, {
  withCredentials: true
});

• Fetch：

fetch('https://sea-lion-app-rm8kh.ondigitalocean.app/api/auth/login', {
  method: 'POST',
  credentials: 'include',
  body: JSON.stringify(loginData),
  headers: {
    'Content-Type': 'application/json'
  }
});

4. 额外排查项 #

• 清除浏览器的旧Cookie和缓存，避免残留配置干扰
• 检查DigitalOcean App的HTTPS是否正常（默认开启，但要确保没有HTTP跳转导致Cookie丢失）
• 确认没有CDN或反向代理篡改Set-Cookie响应头（比如移除SameSite或Secure）

验证方法 #

部署修改后的代码后，打开Chrome开发者工具：

1. 切换到Application标签，查看Cookies下的对应域名
2. 发起测试请求后，检查Network标签里的响应头Set-Cookie属性是否正确
3. 确认Cookie是否出现在浏览器存储中

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