Node/Express部署后未给React前端设置HttpOnly Cookie问题求助

问题1：混合内容请求被浏览器拦截 #

你前端线上站点是https协议，但axios请求的后端地址是http://backendwebsitename/loginAuth，属于HTTPS站点发起HTTP请求的混合内容场景，现代浏览器默认会拦截这类不安全请求，就算请求能正常返回，HTTP响应下发的Cookie也无法写入HTTPS的前端站点存储。
修复方法：

• 后端线上服务必须配置HTTPS证书，启用HTTPS访问
• 将前端axios的请求地址改为https://backendwebsitename/loginAuth

问题2：Set-Cookie属性不符合跨站场景要求 #

你没有贴下发JWT Cookie的代码，线上跨域名部署场景下，必须给Cookie配置以下属性才能正常设置：

• Secure：仅HTTPS请求下才会下发/携带Cookie，线上HTTPS场景必须开启
• SameSite=None：跨站请求下默认的SameSite=Lax会禁止Cookie设置，必须显式设置为None，且该配置必须和Secure同时生效
• HttpOnly：你原有的安全配置，保留即可
• Path=/：确保Cookie对全站路径生效
• 可选配置Domain：如果前后端属于同一根域名下的不同子域名，可配置为根域名（例：前后端为a.example.com和b.example.com时，Domain设为.example.com）

示例Node.js下发Cookie代码参考：

res.cookie('jwt_token', 你的jwt内容, {
  httpOnly: true,
  secure: process.env.NODE_ENV === 'production', // 线上环境开Secure
  sameSite: process.env.NODE_ENV === 'production' ? 'None' : 'Lax', // 线上跨站设为None
  maxAge: 7 * 24 * 60 * 60 * 1000, // 按需设置有效期
  path: '/'
})

问题3：反向代理场景下Express配置缺失 #

如果你线上Node服务前面有Nginx之类的反向代理，HTTPS请求会被代理转为HTTP请求发到Node服务，此时Express会默认认为请求是不安全的，开启Secure的Cookie会被拦截不下发，需要加一行配置信任代理：

server.set('trust proxy', 1)

排查技巧 #

打开浏览器控制台的「网络」面板，找到loginAuth请求，查看响应头的Set-Cookie字段旁的黄色警告标识，浏览器会直接给出Cookie未被设置的具体原因，可快速定位问题。

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