React+Express开发中Cookie未设置到正确localhost域名问题求助

1. 你当前Cookie配置中sameSite: "none"必须搭配secure: true使用，而secure: true要求Cookie仅能在HTTPS协议下被写入和携带，本地开发默认用的HTTP协议的localhost不符合要求，会导致Cookie写入异常。
2. 浏览器将127.0.0.1和localhost识别为两个完全独立的站点，如果你前端请求服务端时用了127.0.0.1:5500地址，Cookie就会被写入127.0.0.1域名下，自然无法在localhost:3000站点下被读取携带。
3. 没有显式指定Cookie的domain字段，服务端会默认使用当前被请求的域名作为Cookie的归属域名，进一步放大了上面的域名不匹配问题。

• 第一步：修改服务端Cookie配置，增加环境变量判断适配开发/生产环境，同时显式指定domain：

const isProduction = process.env.NODE_ENV === 'production'
// refreshToken配置，accessToken同理修改即可
res.cookie("refreshToken", refreshToken, {
  maxAge: 1000 * 60 * 60 * 24 * 30,
  httpOnly: true,
  sameSite: isProduction ? "none" : "lax",
  secure: isProduction,
  domain: isProduction ? '.你的正式生产域名.com' : 'localhost'
});

• 第二步：修正前端请求地址，所有发往服务端的请求统一使用http://localhost:5500作为前缀，不要混用127.0.0.1:5500。
• 第三步：检查Express的CORS配置，必须明确指定允许的前端域名，不能用通配符*，同时开启credentials支持：

const cors = require('cors')
app.use(cors({
  origin: 'http://localhost:3000',
  credentials: true
}))

• 如果你本地开发需要模拟HTTPS环境测试sameSite: none的配置，需要给localhost配置自签名HTTPS证书，同时前后端都通过HTTPS协议访问，否则secure: true的Cookie会被浏览器拦截。

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