本地环境(Express+Vite+CORS)下后端返回的Cookie未被浏览器存储及后续请求未携带的问题求助

我来帮你排查这个棘手的Cookie问题，结合你给出的所有配置，核心问题和对应的解决方案如下：

1. 你最容易忽略的误区：Cookie的绑定域名 #

首先纠正一个排查错误：Cookie是和设置它的后端域名（localhost:3000）绑定的，不是前端的localhost:5173！你之前在DevTools > Application > Cookies里看的是localhost:5173，当然看不到Cookie，应该去看localhost:3000的Cookie列表，这是很多跨域Cookie问题的常见排查盲区。

2. 后端Cookie配置的语法错误 #

你在设置Cookie的domain时犯了一个低级错误：domain: localhost里的localhost是字符串，必须加引号，否则会被当作未定义变量，导致Cookie的域名配置失效，浏览器无法识别存储规则：

// ❌ 错误写法（无引号的localhost是未定义变量）
res.cookie('token', token, {
  domain: localhost,
  // ...其他配置
});

// ✅ 正确写法（本地环境建议直接删除domain配置）
res.cookie('token', token, {
  secure: false, // 本地HTTP环境必须设为false
  httpOnly: true,
  maxAge: 1000 * 60 * 60 * 2,
  sameSite: 'lax', // 本地跨域场景选lax更合适
  // 本地环境完全可以省略domain，浏览器会自动绑定后端域名localhost:3000
});

手动设置domain反而容易出问题，尤其是本地多端口的场景，浏览器自动处理更可靠

3. 前端登录请求必须携带withCredentials: true #

你当前的登录请求没有配置withCredentials: true，这是跨域场景下浏览器允许存储Cookie的必要前提！即使后端返回了Set-Cookie，前端请求如果没开这个配置，浏览器会直接忽略Cookie：

// ✅ 修正后的前端登录请求
const endpoint = `${import.meta.env.VITE_backend_url}/signIn`;
const response = await axios.post(endpoint, {
  role: role,
  email: email,
  password: password
}, {
  withCredentials: true // 跨域请求必须加这个，否则浏览器不处理Cookie
});

跨域场景下，必须同时满足：前端请求带withCredentials: true + 后端CORS设credentials: true，浏览器才会处理并存储Cookie

4. 本地环境下secure属性的强制要求 #

本地环境是HTTP协议（非HTTPS），secure: true的Cookie只能在HTTPS环境下被存储，所以本地必须设为false，否则浏览器会直接丢弃Cookie，这点你之前的尝试方向是错的。

5. SameSite属性的适配建议 #

本地跨域场景（前端5173，后端3000），sameSite: 'strict'会严格限制跨站请求的Cookie存储，建议改为sameSite: 'lax'，这样跨域的登录POST请求返回的Cookie能被正确存储，后续请求也能正常携带。
如果是生产环境的HTTPS跨域场景，才需要设为SameSite: None同时配合secure: true

最终验证步骤 #

按照以上修正后，按这个流程测试：

1. 清除浏览器所有localhost相关的Cookie（避免缓存干扰）
2. 重启前后端服务
3. 发起登录请求，之后查看DevTools > Application > Cookies > localhost:3000，确认Cookie已存储
4. 发起测试请求，查看Network标签的请求头，确认Cookie: token=xxx是否存在，后端的req.cookies应该能正确获取到值

内容来源于stack exchange