MERN栈中无法从Cookie获取JWT Token的问题求助

错误原因及修复方案 #

1. CORS配置未允许凭证传递 #

当前后端app.use(cors())为默认配置，未开启跨域凭证支持；同时前端请求未携带凭证标识，导致浏览器拒绝存储跨域Cookie。

修复后端index.js的CORS配置：

// 替换原来的app.use(cors())
app.use(cors({
  origin: "http://localhost:3000", // 替换为你的前端实际地址
  credentials: true // 允许跨域携带凭证
}));

修复前端Login.jsx的axios请求：
添加withCredentials: true选项，让请求携带Cookie：

const response = await axios.post('http://localhost:8000/login', {
  blockNumber: blockNumber,
  flatNumber: flatNumber,
  password: password
}, {
  withCredentials: true // 新增这一行
})

2. Cookie属性不完整 #

当前res.cookie仅设置了httpOnly和expires，缺少sameSite属性，跨域场景下浏览器会默认阻止存储此类Cookie；生产环境HTTPS还需配置secure属性。

修改后端路由中的res.cookie配置（登录和注册路由均需修改）：

res.cookie("jwt", token, {
  httpOnly: true,
  expires: new Date(Date.now() + 24 * 60 * 60 * 1000), // 改为1天有效期，方便测试
  sameSite: process.env.NODE_ENV === "production" ? "none" : "lax", // 生产环境用none，开发环境用lax
  secure: process.env.NODE_ENV === "production" // 生产环境开启secure，本地HTTP可关闭
})

3. 后端中间件顺序错误 #

当前index.js中路由中间件app.use(Resident)在cookieParser()之前，导致路由无法正常读取req.cookies（虽不直接影响存储，但会破坏后续Cookie读取逻辑）。

调整index.js的中间件顺序：

app.use(cors({
  origin: "http://localhost:3000",
  credentials: true
}));
app.use(express.json());
app.use(cookieParser()); // 将cookieParser放在路由之前
app.use(Resident); // 路由放在cookieParser之后

4. 后端登录路由逻辑错误 #

登录路由中设置res.cookie后立刻尝试读取req.cookies.jwt是错误逻辑：req.cookies是当前请求携带的Cookie，刚设置的是响应Cookie，只有下一次前端请求才会将该Cookie带回，此处必然返回undefined。

删除登录路由中这段无效代码：

let jwtToken = req.cookies;
console.log("req.cookies.jwt: " + jwtToken);

验证方法 #

1. 重启后端服务，重新发起登录请求
2. 打开浏览器开发者工具 -> 应用（Application） -> Cookie -> 查看localhost下是否存在jwt Cookie
3. 后续接口请求（如仪表盘接口），前端axios同样携带withCredentials: true，后端即可通过req.cookies.jwt获取Token

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