React.js如何将客户端Cookie值传递到服务端？服务端读取Cookie为undefined

问题排查与解决步骤 #

1. 检查前端请求配置

服务端已经开启了credentials: true的CORS配置，前端必须同步开启凭证携带，否则浏览器不会自动在请求中附带Cookie：

• 若使用fetch发起请求，需添加credentials: 'include'参数：

fetch('http://localhost:8000/目标接口路径', {
  method: 'GET/POST',
  credentials: 'include', // 必须添加
  // 其他请求配置
})

• 若使用axios发起请求，可全局配置或单请求配置：

// 全局配置
axios.defaults.withCredentials = true
// 单请求配置
axios.get('http://localhost:8000/目标接口路径', {
  withCredentials: true // 必须添加
})

2. 检查Cookie设置属性

后端设置jwtCookie时属性配置错误，也会导致浏览器不携带、服务端无法解析：

// 登录接口设置Cookie的正确示例
res.cookie('jwt', 生成的jwtToken, {
  httpOnly: true, // 推荐开启，防止前端JS篡改窃取Cookie
  maxAge: 7 * 24 * 60 * 60 * 1000, // 按需设置Cookie过期时间
  sameSite: 'Lax', // 本地开发/同站场景使用，跨站场景需设为`None`且同步开启`secure: true`
  // secure: process.env.NODE_ENV === 'production', // 生产HTTPS环境开启该配置
  path: '/' // 确保Cookie全局生效
})

注意：本地开发用HTTP协议时，不要设置sameSite: 'None'，否则浏览器会主动拦截Cookie

3. 修正服务端中间件顺序

你当前的index.js存在中间件顺序错误、冗余配置问题，调整如下：

import express from "express";
import cors from "cors";
import cookieParser from "cookie-parser";
import connection from "./database/db.js";
import Router from "./routes/route.js";
import auth from "./middleware/auth.js";

const app = express();

const corsOptions = {
    origin: true,
    credentials: true,
};

app.use(cors(corsOptions));
app.use(cookieParser());
// express 4.16+ 已内置bodyParser功能，无需额外引入bodyParser包
app.use(express.json({ extended: true }))
app.use(express.urlencoded({ extended: true }))
// 路由必须注册在所有全局中间件之后
app.use('/', Router);

const PORT = 8000;
app.listen(PORT, () => {
    console.log(`server is running successfully at ${PORT}`);
})

connection();

4. 兜底验证

如果以上步骤都完成还是拿不到Cookie，可以在auth中间件中打印req.headers，检查请求头中是否存在cookie字段：

• 若请求头没有cookie字段：说明Cookie设置或前端请求配置有问题，可打开浏览器F12网络面板，查看对应请求的Request Headers确认是否携带Cookie
• 若请求头有cookie字段但req.cookies为空：说明cookie-parser未生效，检查是否正确安装依赖、是否注册在路由之前

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