NodeJS（Express框架）中JWT认证成功后Cookie无法在浏览器设置的问题排查及解决方法

这个问题本质是跨域请求下的Cookie配置不完整，结合你的代码来看，主要有几个关键点出了问题：

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

Axios在跨域请求中默认不会携带Cookie，这是浏览器同源策略的限制。即使后端返回了Set-Cookie响应头，浏览器也不会保存这个Cookie，因为请求没有明确告知浏览器要携带凭证。

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

如果前端要发送带Cookie的请求，后端必须在CORS配置中明确允许凭证（credentials），否则浏览器会拦截Set-Cookie头，不会存储Cookie。

3. Cookie选项配置错误 #

你的cookieOptions里用了expiresIn字段，但Express的res.cookie()方法接受的是expires字段，这个错误会导致Cookie的过期时间不生效，甚至可能让浏览器拒绝存储该Cookie。另外，跨域场景下缺少sameSite和secure属性的配置，这也是浏览器拒绝存储Cookie的常见原因。

4. 后端未配置Cookie解析中间件 #

如果你的Express应用没有使用cookie-parser中间件，req.cookies会是undefined，因为Express默认不会自动解析Cookie。

修复步骤 #

第一步：修改前端Axios请求，开启凭证携带 #

在Axios请求中添加withCredentials: true，告诉浏览器在跨域请求中携带Cookie：

login = async () => { 
  const email = document.getElementById('email').value; 
  const password = document.getElementById('password').value; 
  const credentials = { email, password } 
  const res = await axios.post(
    'http://127.0.0.1:8080/api/v1/users/login', 
    credentials, 
    { withCredentials: true } // 新增这一行
  ); 
  console.log(res); 
}

第二步：配置后端CORS允许凭证 #

首先安装cors包（如果还没装）：

npm install cors

然后在你的Express入口文件中配置CORS，注意origin要设置为你的React前端的实际地址（比如http://localhost:3000），不能用*（因为允许凭证时origin不能是通配符）：

const cors = require('cors');
const express = require('express');
const app = express();

// 配置CORS
app.use(cors({
  origin: 'http://localhost:3000', // 替换成你的React前端URL
  credentials: true // 允许携带凭证
}));

第三步：修复Cookie选项配置 #

把expiresIn改成expires，并添加跨域所需的sameSite和secure属性（根据环境动态设置）：

const sendJSONWebToken = (user, statusCode, res) => { 
  const token = createJSONWebToken(user._id); 
  const cookieOptions = { 
    expires: new Date(Date.now() + 30*24*60*60*1000), // 修正字段名
    httpOnly: true, // 可选，防止XSS攻击，前端JS无法读取该Cookie（后端仍可通过req.cookies获取）
    sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax', 
    secure: process.env.NODE_ENV === 'production' // 生产环境必须为true（HTTPS），开发环境为false（HTTP）
  };

  // 如果sameSite设为'none'，secure必须为true，这是浏览器的要求
  if (cookieOptions.sameSite === 'none') {
    cookieOptions.secure = true;
  }

  res.cookie('jwt', token, cookieOptions); 
  user.password = undefined; 
  res.status(statusCode).json({ 
    status: 'Success', 
    data: { user } 
  }) 
}

第四步：配置Cookie解析中间件 #

安装cookie-parser包：

npm install cookie-parser

然后在Express中使用：

const cookieParser = require('cookie-parser');
app.use(cookieParser());

验证方法 #

1. 重启前后端服务
2. 执行登录请求后，打开Chrome开发者工具的Application标签，在Cookies下找到你的后端域名，应该能看到jwt Cookie
3. 后续请求中，console.log(req.cookies)应该能输出包含jwt的对象

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