部署后刷新页面Cookie消失？MERN全栈应用Cookie问题排查

你遇到的问题核心是跨域场景下Cookie的属性配置不满足浏览器安全规则——本地localhost因为属于同源特例（不同端口被浏览器宽松视为同源）所以正常，部署后域名不同就触发了浏览器的Cookie拦截机制。下面是具体解决步骤：

1. 修正Cookie的关键配置属性 #

直接修改登录路由里的res.cookie代码，补充以下属性：

res.cookie('token', token, {
  httpOnly: true,
  expires: expirationDate,
  // 部署后用HTTPS必须设为true，否则浏览器会拒绝保存Cookie
  secure: process.env.NODE_ENV === 'production',
  // 跨域场景必须设为None，同时配合Secure属性使用
  sameSite: 'None',
  // 设置为主域名，比如前端是app.yourdomain.com、后端是api.yourdomain.com，就写'.yourdomain.com'
  domain: '.yourdomain.com'
});

注意：如果前后端是完全不同的顶级域名，domain属性可能无效，这种情况建议通过反向代理把前后端统一到同一个域名下。

2. 完善CORS配置 #

仅设置Access-Control-Allow-Credentials不够，必须指定具体的允许源（不能用*，带Credentials的请求不支持通配符）：
如果使用cors包，配置如下：

const cors = require('cors');
app.use(cors({
  origin: 'https://your-frontend-domain.com', // 替换为你的前端实际域名
  credentials: true
}));

如果自己写中间件：

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'https://your-frontend-domain.com');
  res.header('Access-Control-Allow-Credentials', true);
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  // 处理OPTIONS预检请求
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }
  next();
});

3. 前端请求必须携带Credentials #

不管用axios还是fetch，都要开启携带Cookie的配置：

• axios示例：

axios.post('/login', { username, password }, { withCredentials: true });

• fetch示例：

fetch('/login', {
  method: 'POST',
  credentials: 'include',
  body: JSON.stringify({ username, password }),
  headers: { 'Content-Type': 'application/json' }
});

验证步骤 #

1. 登录后打开浏览器开发者工具 -> Application -> Cookies，检查目标域名下是否存在token Cookie，且Secure、SameSite=None、Domain属性配置正确。
2. 查看登录请求的Response Headers里的Set-Cookie字段，确认包含上述配置的属性。

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