Cookie中已存储JWT Token但读取值为undefined的问题如何解决？

问题1：Cookie键名不匹配 #

你服务端设置Cookie的时候用的键名是token：

res.cookie('token', token, { expires: new Date(Date.now() + 9999999), httpOnly: true })

但是你在Auth中间件里读取的键名是jwt：

const token = req.cookies.jwt;

直接把这里改成req.cookies.token即可解决大部分场景的取值问题。

问题2：跨域Cookie携带配置缺失 #

你前端运行在localhost:3000、后端运行在localhost:8000属于跨域场景，要正常携带Cookie需要完成两处配置：

• 前端发请求时开启凭证携带规则：
  若使用axios，给请求配置加withCredentials: true
  若使用原生fetch，给请求配置加credentials: 'include'
• 后端CORS配置允许凭证和指定来源：
  以常用的cors中间件为例，配置如下：

  app.use(cors({
    origin: 'http://localhost:3000', // 不能设置为通配符*，必须指定具体的前端地址
    credentials: true
  }))
  

问题3：检查cookie-parser注册顺序 #

确认你在服务端入口文件中，是在路由注册之前就完成了cookie-parser的注册：

import cookieParser from 'cookie-parser';
// 先注册cookieParser中间件
app.use(cookieParser());
// 再注册业务路由
app.use(router);

其他可优化点 #

1. 你服务端saveprofile接口的catch块存在笔误，把req.status(500)修改为res.status(500)，否则接口报错时会抛出额外异常。
2. 如果后续需要部署到线上环境，跨域场景下需要给Cookie加上sameSite: 'none'配置，同时开启secure: true（要求站点必须为HTTPS协议）。

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