React JS中MERN应用子域名跳转后Cookie丢失问题求助

1. 配置Cookie的Domain属性 #

后端设置认证Cookie时，必须将domain属性设为.localhost（注意前缀的点），这样所有localhost的子域名都能共享该Cookie。

以Express框架为例，Cookie设置代码如下：

res.cookie('authToken', token, {
  domain: '.localhost',
  httpOnly: true,
  secure: process.env.NODE_ENV === 'production', // 生产环境需开启此选项
  sameSite: 'lax', // 若跨域场景需求可设为'none'，但需配合secure属性
  maxAge: 24 * 60 * 60 * 1000 // 按需设置有效期，示例为1天
});

核心是domain: '.localhost'，它能让companyname.localhost这类子域名识别到localhost主域名下创建的Cookie。

2. 前端跳转逻辑保持域名一致性 #

前端跳转直接使用子域名完整地址即可，比如：

window.location.href = 'http://companyname.localhost:3000';

只要Cookie的domain配置正确，子域名页面就能自动读取到认证Cookie，无需额外处理。

3. 优化开发环境配置（可选） #

若使用Create React App，除已设置的DANGEROUSLY_DISABLE_HOST_CHECK=true，可在.env中补充：

HOST=localhost
PORT=3000

确保开发服务器绑定到localhost，避免子域名请求被拦截。

4. 验证Cookie配置有效性 #

登录成功后，打开浏览器开发者工具的Application > Cookies > localhost，查看目标Cookie的Domain字段是否为.localhost。确认后，切换到子域名页面，同样在Cookies列表中就能看到该Cookie。

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