本地环境下页面刷新后Cookie被清除的问题求助

我太懂这种明明看着Cookie设置成功，一刷新就凭空消失的挫败感了！再加上SameSite的警告弹窗，简直双重打击。我帮你梳理几个关键的排查点和解决方案，应该能解决你的问题：

首先排查最容易忽略的低级错误：请求地址写反了！ #

你看你的Axios请求代码里，地址是http://localhost:5173/login——但这个是你React前端的运行端口啊！你说用CORS从不同端口访问API，那后端肯定是跑在另一个端口（比如3000）对吧？你把请求地址写成前端端口，相当于在请求自己，后端根本没接到这个请求，自然Cookie也没被正确设置到后端对应的域名下，刷新页面Cookie当然就没了。

赶紧把请求地址改成后端的实际端口，比如后端跑在3000的话，就改成：

const response = await axios.post(
  `http://localhost:3000/login`, // 这里改成后端实际运行的端口
  { emailId, password },
  { withCredentials: true }
);

然后解决SameSite警告，这是Cookie丢失的核心原因之一 #

现代浏览器对Cookie的SameSite属性有严格要求，你现在设置Cookie的时候没加这个属性，浏览器会默认用Lax模式，但跨域场景下（不同端口属于跨域）可能会导致Cookie无法持久化。另外还要注意secure属性的坑：

• 本地开发用的是HTTP，secure: true的话浏览器会直接拒绝保存Cookie；
• 生产环境用HTTPS的话，必须同时设置SameSite: 'None'和secure: true才能跨域传递Cookie。

所以把你后端的Cookie设置代码改成这样：

res.cookie("token", "mygeneratedtoken", {
  expires: new Date(Date.now() + 8 * 3600000),
  // 开发环境用Lax，生产环境切换为None
  sameSite: process.env.NODE_ENV === 'production' ? 'None' : 'Lax',
  // 生产环境才开启secure，开发环境保持关闭
  secure: process.env.NODE_ENV === 'production',
  httpOnly: true, // 额外加上这个，防止XSS攻击，且不影响请求自动携带Cookie
});

最后确认CORS和前端配置没问题 #

你的CORS配置app.use(cors({ origin: 'http://localhost:5173', credentials: true }))是对的，保持不变就好。前端Axios的withCredentials: true也配置正确了，这个是跨域请求携带Cookie的必要条件，不用改。

验证方法 #

修改完之后，先打开浏览器的开发者工具（F12），切换到「Application」面板，找到「Cookies」选项，看看后端端口对应的域名下有没有token这个Cookie。如果刷新前存在，刷新后还在，那就说明问题解决了。

内容来源于stack exchange