Express部署Heroku后Cookie设置在服务端而非客户端问题求助

核心原因 #

跨域场景下浏览器有强制同源安全限制：B域名（后端服务域名）返回的Set-Cookie响应头，默认只会将Cookie存储到B域名的Cookie池中，不可能直接写入A域名（前端客户端域名）的Cookie池，你现在看到Cookie出现在后端域名存储中属于符合规则的正常现象。

分场景解决方案 #

场景1：仅需要后续前端请求后端接口时自动携带Cookie（绝大多数前后端分离认证场景的需求） #

按以下步骤修改配置即可：

• 前端所有发往后端的跨域请求必须开启凭证携带配置：
  • 使用fetch API时添加参数 credentials: 'include'
  • 使用axios时添加配置 withCredentials: true
• 移除CORS配置中allowedHeaders列表里的Set-Cookie项，该响应头属于浏览器自动处理范畴，不需要显式声明允许，多余配置反而可能引发异常
• 你当前Cookie配置了secure: true，该属性要求Cookie仅能在HTTPS协议下传输，你CORS origin列表中的http://gigvilla.com属于HTTP协议，无法携带该Cookie，要么删除该HTTP域名配置强制站点走HTTPS，要么根据实际请求协议动态调整Cookie的secure属性值
• 保留你已配置的app.set("trust proxy", 1)，该配置适配Heroku反向代理的部署环境，能让express正确识别请求的真实协议，避免secure属性的Cookie设置失败

场景2：确实需要Cookie存储到前端域名下、供前端JS直接读取 #

按以下步骤修改：

• 移除对应Cookie的httpOnly: true配置，httpOnly属性的Cookie禁止前端JS读取，无法通过前端代码写入当前域名
• 后端将需要前端存储的Cookie值添加到登录接口的响应体中返回
• 前端拿到响应中的Cookie值后，调用document.cookieAPI主动写入当前域名的Cookie存储中

额外优化点 #

你当前设置的Cookie名称just testing包含空格，不符合Cookie命名规范，建议修改为just_testing或justTesting，避免浏览器解析异常导致Cookie失效。

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