浏览器Cookies无法设置，Postman正常Fetch调用异常求助

前端Fetch配置修正 #

• 浏览器同源策略下，Fetch默认不会携带/存储Cookie，必须显式添加credentials配置：
  • 跨域请求用credentials: 'include'
  • 同域请求用credentials: 'same-origin'
• 示例代码：

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

后端Express跨域配置调整 #

• 若前后端跨域，必须配置CORS允许携带Cookie，且origin不能设为*，需指定前端具体域名：

const cors = require('cors');
app.use(cors({
  origin: 'http://localhost:5173', // 替换为你的前端实际域名+端口
  credentials: true
}));

Cookie属性检查 #

• 后端设置Cookie时，注意以下属性：
  • Secure：仅HTTPS环境下启用，HTTP环境设置会导致Cookie无法存储
  • SameSite：跨域场景需设为None（同时配合Secure），同域可设为Lax/Strict
  • HttpOnly：若无需前端JS读取Cookie，可开启增强安全性，不影响存储
• 示例后端设置代码：

res.cookie('sessionId', 'xxx', {
  maxAge: 86400000,
  httpOnly: true,
  secure: process.env.NODE_ENV === 'production',
  sameSite: process.env.NODE_ENV === 'production' ? 'None' : 'Lax'
});

其他注意事项 #

• 确保前端页面和API请求的协议、域名、端口一致（跨域需提前配置CORS）
• 检查浏览器控制台的Application面板，查看Cookie是否被标记为"Rejected"，根据提示调整配置

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