Express应用如何正确访问Cookie？MERN项目React端访问受保护路由失败求解

1. 后端前置配置 #

首先安装cookie-parser中间件，用来自动解析请求头中的Cookie为结构化对象，避免手动解析原始req.headers.cookie：

npm install cookie-parser

在Express入口文件中引入并注册：

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

同时要正确配置CORS支持跨域携带Cookie：

const cors = require('cors');
app.use(cors({
  origin: 'http://localhost:3000', // 替换为你的React客户端实际地址，不能用通配符*
  credentials: true
}));

2. 调整身份校验中间件逻辑 #

不需要写两套逻辑，只需要在原有判断Authorization头的逻辑之后，追加Cookie中token的读取逻辑即可，同时兼容Postman传Authorization头、React端自动带Cookie两种场景：

exports.protect = catchAsync(async (req, res, next) => {
  let token;

  // 优先读取Authorization头，兼容Postman测试、第三方接口调用场景
  if (
    req.headers.authorization &&
    req.headers.authorization.startsWith('Bearer')
  ) {
    token = req.headers.authorization.split(' ')[1];
  } 
  // Authorization头不存在时，读取httpOnly Cookie中的token，兼容React客户端场景
  else if (req.cookies?.token) { // 此处的token要和你登录接口设置Cookie时的key保持一致
    token = req.cookies.token;
  }

  if (!token) {
    return next(new AppError('No token found!', 401));
  }

  const decoded = await promisify(jwt.verify)(token, process.env.JWT_SECRET);
  const freshUser = await User.findById(decoded.id);

  if (!freshUser) {
    return res.status(401).json({
      status: 'fail',
      message: 'This token no longer exists!',
    });
  }

  req.user = freshUser;
  next();
});

3. React端请求配置 #

确保前端发送请求时主动携带Cookie：

• 如果用fetch调用接口，添加credentials: 'include'参数：

fetch('http://localhost:5000/protected-route', {
  credentials: 'include'
})

• 如果用axios调用接口，添加withCredentials: true配置：

axios.get('http://localhost:5000/protected-route', {
  withCredentials: true
})
// 也可以全局配置：axios.defaults.withCredentials = true

4. Cookie配置校验 #

确认登录接口设置Cookie时的参数符合跨域要求：

res.cookie('token', generatedJwt, {
  httpOnly: true, // 保留该配置，前端始终无法读取token
  sameSite: 'lax', // 开发环境前后端端口不同时用lax，生产HTTPS环境可设为strict
  secure: process.env.NODE_ENV === 'production', // 生产环境HTTPS时开启
  maxAge: 24 * 60 * 60 * 1000 // 自行调整有效期
})

配置完成后，不管是Postman手动传Bearer Token，还是React端自动携带httpOnly Cookie，都可以正常完成身份校验，不需要维护两套逻辑。

内容的提问来源于stack exchange，提问作者The silent one