NextJS API路由返回的Cookie未传递到客户端浏览器如何解决

问题核心原因 #

1. 你通过Next.js API路由做NestJS后端的代理层，NestJS返回的Set-Cookie头只存在于API路由层调用NestJS的响应对象中，你没有手动将该头传递给前端，因此前端收不到Cookie
2. 你之前用new Cookies(req, resp).get('Authentication')是尝试从客户端发往Next.js的请求中提取Cookie，登录请求阶段客户端还没有持有Cookie，自然返回空值
3. 浏览器出于安全限制，默认会对前端JS隐藏Set-Cookie响应头，即使响应头正确设置，你在前端console.log(response.headers)也看不到，属于正常现象

修复步骤 #

1. 修改Next.js API路由代码，手动传递Set-Cookie头

直接读取NestJS返回的set-cookie头，写入Next.js给客户端的响应中即可，无需解析Cookie内容：

const url = process.env.SH_API_BASEURL + '/auth/signin';
const resp = await axios.post(
  url,
  { loginName: name, password },
  { withCredentials: true }
);

// 新增：把NestJS返回的Cookie原样传递给前端
if (resp.headers['set-cookie']) {
  res.setHeader('Set-Cookie', resp.headers['set-cookie']);
}

// 其余返回逻辑不变，把NestJS的响应内容返回给前端
res.status(resp.status).json(resp.data);

2. 前端请求添加withCredentials配置

调用登录接口的axios请求需要开启withCredentials，否则浏览器会拒绝接收响应中的Cookie：

const response = await axios.patch('/api/v1/auth/signin', formData, {
  withCredentials: true
});

3. 验证Cookie是否生效

不要通过前端打印响应头的方式判断Cookie是否设置成功，直接打开浏览器DevTools：

• 进入Application标签页
• 左侧菜单找到Storage→Cookies→选择你的站点域名
• 查看是否存在Authentication和Refresh两个Cookie，存在则设置成功

补充注意点 #

• 你当前的Cookie设置了HttpOnly属性，属于安全设计，前端JS本来就无法读取，后续请求浏览器会自动携带该Cookie，无需手动处理
• 如果后续部署到线上不同域名，需要在NestJS生成Cookie的代码中添加和前端域名匹配的Domain属性，避免跨域Cookie丢失

内容的提问来源于stack exchange，提问作者Chris Hunter-Johnson