Node.js后端+React前端场景下浏览器无法设置Cookie问题

核心原因拆解 #

从你遇到的情况（网络请求能看到Cookie但浏览器不落地、页面刷新仍登录但重启浏览器就失效）来看，问题基本出在Cookie的属性配置不满足浏览器安全规则，或是前后端跨域配置不匹配上。

1. 跨域场景下的关键配置缺失 #

如果前端React和后端Node.js是跨域部署的，必须同时满足以下条件：

• 后端响应头必须加Access-Control-Allow-Credentials: true
• 前端请求要带上凭证：Axios设置withCredentials: true，Fetch设置credentials: 'include'
• Cookie的SameSite属性不能设为Strict，跨域场景建议用Lax；如果是跨主域请求，需设为None（但None必须搭配Secure属性，也就是只能在HTTPS环境下生效）

2. Cookie属性冲突导致无法保存 #

• 要是Cookie开了HttpOnly: true，前端JS（包括React）根本没法手动修改或读取这个Cookie，这是安全机制，所以你手动设置肯定没用。
• 如果你的服务是HTTP协议（非HTTPS），却给Cookie加了Secure: true，浏览器会直接拒绝保存——Secure要求Cookie只能通过HTTPS传输。

3. 会话Cookie导致重启失效 #

你说重启浏览器就退出登录，说明这个Cookie是会话级别的（没设过期时间，浏览器一关就销毁）。要实现持久化登录，必须给Cookie设置Max-Age（单位秒）或者Expires（具体过期时间）。

具体修复代码示例 #

后端(Node.js/Express)正确配置 #

res.cookie('auth_token', '你的令牌值', {
  httpOnly: true, // 建议开启，防XSS攻击
  secure: process.env.NODE_ENV === 'production', // 生产环境强制HTTPS传输
  sameSite: process.env.NODE_ENV === 'production' ? 'None' : 'Lax', // 适配跨域场景
  maxAge: 7 * 24 * 60 * 60 * 1000, // 设置7天有效期，解决重启浏览器失效
  domain: '.你的主域名.com' // 前后端同主域时设置，确保子域共享Cookie
});

前端(React)请求配置 #

• Axios全局配置：

axios.defaults.withCredentials = true;

• Fetch单个请求配置：

fetch('/api/login', {
  method: 'POST',
  credentials: 'include',
  body: JSON.stringify(你的请求数据)
});

额外注意点 #

• 本地开发时，别混用localhost和127.0.0.1，浏览器会把它们当成不同域名，尽量统一用一个前缀请求后端。
• 检查浏览器设置，别禁用了第三方Cookie（跨域场景下可能会被拦截）。

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