Express部署Heroku后set-cookie正常但浏览器未写入Cookie问题

• 本地localhost环境下基于Cookie传递认证令牌的逻辑运行完全正常
• Postman请求本地服务、Heroku部署服务均可正常收到返回的Cookie
• 浏览器访问Heroku部署环境时，Network面板可确认响应携带Set-Cookie头，但Application面板无对应Cookie写入，认证逻辑失效
• 已提前配置Cookie的sameSite: 'none'、secure: true属性，已开启CORS凭证允许配置，已开启trust proxy配置，问题仍未解决

这个问题是Heroku反向代理架构+现代浏览器跨站Cookie安全规则共同导致的，常见触发点有三个：

• Express默认app.enable('trust proxy')仅信任1层代理，Heroku路由层在自定义域名、CDN加速场景下会经过2层及以上代理，导致Cookie属性校验逻辑异常
• 跨站场景下SameSite=None的Cookie缺失path属性时，Chrome、Edge等基于Chromium的浏览器会直接拦截Cookie写入，localhost场景下浏览器默认放宽安全限制所以不会触发问题
• 前端请求未显式开启凭证携带配置，或访问时未全程使用HTTPS，触发secure标记Cookie的拦截规则

1. 先明确浏览器拦截的具体原因 #

打开浏览器开发者工具，进入Network面板找到登录接口的响应，定位Set-Cookie响应头：

• 如果行首有黄色警告三角，鼠标悬浮即可看到浏览器给出的明确拦截原因，可直接对应原因调整

2. 修正反向代理信任配置 #

将原有单句的app.enable("trust proxy")替换为Express官方推荐的PaaS平台适配配置，正确识别多层代理转发的请求协议：

// 替换原有的 app.enable("trust proxy")
app.set('trust proxy', ['loopback', 'linklocal', 'uniquelocal'])

3. 补全Cookie必填属性 #

在原有Cookie配置中补全path属性，显式声明Cookie生效范围，避免浏览器默认值兼容问题：

res.cookie('token', token,{
  maxAge: 30 * 24 * 60 * 60 * 1000,
  httpOnly: true,
  sameSite: 'none',
  secure: true,
  path: '/', // 新增：声明Cookie在全站路径下生效
  // 若使用自定义域名，可新增domain配置，前缀加.以匹配所有子域名
  // domain: '.your-custom-domain.com'
})

4. 校验前端请求与访问配置 #

• 所有需要携带Cookie的接口请求必须开启凭证携带配置：fetch请求需加credentials: 'include'参数，axios需全局配置axios.defaults.withCredentials = true
• 访问Heroku服务时必须全程使用HTTPS协议，secure: true标记的Cookie在HTTP协议下不会被写入，若曾用HTTP访问过站点，先清除对应域名下的所有缓存、Cookie后再重试
• 若绑定了自定义域名，确认域名SSL证书有效，无过期、域名不匹配问题，证书异常站点的安全Cookie会被浏览器直接拦截

5. 排查浏览器第三方Cookie拦截规则 #

若使用Chrome 104+版本，默认开启的第三方Cookie拦截规则可能拦截跨站Cookie：

• 可临时进入浏览器Cookie设置页，将Heroku服务域名、前端站点域名加入第三方Cookie允许列表测试
• 生产环境长期方案可考虑将前后端部署在同一根域名下，规避跨站Cookie限制

重新部署服务后完成以下校验即代表修复成功：

• 登录接口的Set-Cookie响应头无警告标识
• Application面板对应域名下可看到写入的token Cookie
• 后续调用需认证的接口时，请求头自动携带Cookie: token=xxx字段

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