Next.js+Express中Cookie可见但req.headers.cookie无法读取

1. 检查Express的CORS配置 #

前端请求已添加credentials: "include"，但Express必须显式允许凭证传递，且不能使用通配符*作为允许的Origin，必须指定Next.js的具体地址。

如果使用cors中间件，修改配置如下：

const cors = require('cors');
app.use(cors({
  origin: 'http://localhost:3000', // 替换为你的Next.js实际端口
  credentials: true // 允许携带Cookie等凭证
}));

若手动配置CORS头：

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.header('Access-Control-Allow-Credentials', 'true');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Accept');
  next();
});

2. 调整Cookie的SameSite属性 #

跨域场景下，Cookie的SameSite属性必须设置为"none"，同时配合secure属性（生产环境需设为true，localhost部分浏览器允许false）。

修改Cookie序列化代码：

res.setHeader(
  "Set-Cookie",
  cookie.serialize("tk", accessToken, {
    maxAge: 1000 * 60 * 15,
    httpOnly: true,
    path: "/",
    secure: process.env.NODE_ENV === 'production', // 生产环境强制HTTPS
    expires: expiresIn,
    sameSite: "none", // 跨域请求必须开启此配置
  })
);

3. 确保所有接口请求都携带凭证 #

登录请求已加credentials: "include"，但后续调用需要读取Cookie的接口时，必须同样在fetch配置中添加该字段，否则浏览器不会自动携带Cookie：

const resp = await fetch("http://localhost:5000/api/your-target-endpoint", {
  method: "GET",
  credentials: "include", // 必须添加此行
  headers: new Headers({
    "Accept": "application/json"
  })
});

4. 验证请求头是否携带Cookie #

在Express的目标接口中，先打印请求头确认cookie字段是否存在：

app.get('/api/your-target-endpoint', (req, res) => {
  console.log('请求头:', req.headers); // 查看是否有cookie字段
  const cookies = cookie.parse(req.headers.cookie || "");
  console.log('解析后的Cookie:', cookies);
  // 后续业务逻辑
});

如果req.headers.cookie不存在，说明浏览器未发送Cookie，回到前两步检查CORS和Cookie配置。

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