MERN栈中Chrome无法设置JWT Token Cookie问题求助

1. 跨域请求未携带凭证 #

前端fetch默认不会携带Cookie，需要显式添加credentials: 'include'选项：

await fetch('http://localhost:5000/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  credentials: 'include', // 新增此行
  body: JSON.stringify({ email, password })
})

2. 后端CORS配置未允许凭证 #

若前后端端口不同（如前端3000、后端5000），跨域场景下后端必须配置CORS允许凭证，且指定具体origin（不能用*）：
假设使用cors中间件，配置示例：

const cors = require('cors');
app.use(cors({
  origin: 'http://localhost:3000', // 替换为你的前端地址
  credentials: true
}));

3. Cookie参数错误：expiresIn不是有效选项 #

res.cookie的配置项中没有expiresIn，需用maxAge或expires设置过期时间：

• 使用maxAge（毫秒数）：

res.cookie('jwtToken', accessToken, { 
  maxAge: 24 * 60 * 60 * 1000, // 1天
  httpOnly: true,
  sameSite: 'lax' // 跨域场景可选'none'（需配合secure: true，仅HTTPS环境生效）
})

• 或使用expires：

const expiryDate = new Date();
expiryDate.setDate(expiryDate.getDate() + 1);
res.cookie('jwtToken', accessToken, { 
  expires: expiryDate,
  httpOnly: true,
  sameSite: 'lax'
})

4. 检查Chrome Cookie查看路径 #

在ChromeApplication标签页中，确认选择的域名是localhost（后端端口不影响Cookie归属），httpOnly类型的Cookie会正常显示在列表中，只是无法通过前端JS读取。

5. 响应顺序验证 #

确保代码中没有其他中间件提前发送响应，导致Cookie未被正确设置（当前代码先设置Cookie再返回JSON的顺序是正确的）。

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