NuxtJS 3调用NestJS API后Cookie未设置问题求助

核心原因 #

Nuxt 3的服务端路由作为代理层时，不会自动将上游NestJS接口返回的Set-Cookie响应头转发给浏览器客户端，必须手动提取并设置到服务端路由的响应头中。

具体解决步骤 #

1. 在Nuxt服务端路由中手动转发Set-Cookie头 #

在Nuxt的server/api/auth/login.post.ts文件中，调用Nest登录接口后，提取返回的Set-Cookie头并追加到当前服务端路由的响应头里：

export default defineEventHandler(async (event) => {
  // 读取客户端提交的登录参数
  const loginParams = await readBody(event);
  
  // 调用NestJS登录接口，保留响应头信息
  const nestLoginRes = await $fetch('http://你的Nest服务域名/login', {
    method: 'POST',
    body: loginParams,
    headers: { 'Content-Type': 'application/json' },
    // 开启响应头获取权限
    fetchOptions: { credentials: 'include' }
  });

  // 从Nest响应中提取Set-Cookie头（可能是数组，对应两个Cookie）
  const setCookieHeaders = getResponseHeaders(nestLoginRes).get('Set-Cookie');
  
  // 将Cookie转发到客户端
  if (setCookieHeaders) {
    if (Array.isArray(setCookieHeaders)) {
      setCookieHeaders.forEach(cookie => appendHeader(event, 'Set-Cookie', cookie));
    } else {
      appendHeader(event, 'Set-Cookie', setCookieHeaders);
    }
  }

  // 返回登录结果给客户端
  return { success: true, ...nestLoginRes };
});

2. 确保NestJS的Cookie与CORS配置正确 #

如果Nuxt和Nest部署在不同域名下，需在Nest的main.ts中配置CORS允许携带Cookie：

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  
  app.enableCors({
    origin: 'http://你的Nuxt域名', // 生产环境按需配置，支持数组或函数
    credentials: true, // 必须开启，允许跨域携带Cookie
    allowedHeaders: ['Content-Type']
  });

  await app.listen(3000);
}
bootstrap();

同时，Nest登录接口设置Cookie时要配置正确的跨域参数：

@Post('login')
async login(
  @Body() loginDto: LoginDto,
  @Res({ passthrough: true }) res: Response
) {
  const { accessToken, refreshToken } = await this.authService.validateUser(loginDto);

  // 设置认证Cookie
  res.cookie('access_token', accessToken, {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production', // 生产环境HTTPS下必须设为true
    domain: '.你的主域名.com', // 适配主域名与子域名，按需调整
    path: '/',
    sameSite: 'lax', // 根据跨域场景选lax或strict
    maxAge: 3600000 // 1小时有效期
  });

  // 设置刷新Token Cookie
  res.cookie('refresh_token', refreshToken, {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    domain: '.你的主域名.com',
    path: '/',
    sameSite: 'lax',
    maxAge: 7 * 24 * 3600000 // 7天有效期
  });

  return { message: '登录成功' };
}

3. 验证响应头 #

打开浏览器开发者工具的「网络」面板，查看Nuxt服务端路由/api/auth/login的响应头，确认Set-Cookie字段存在且参数与Nest返回的一致。

常见排查点 #

• 检查Nuxt服务端路由是否正确提取Set-Cookie，注意头名大小写不敏感，但需确保调用getResponseHeaders时逻辑正确。
• 生产环境下必须开启secure: true，否则浏览器会拒绝设置HttpOnly Cookie。
• 若Nest和Nuxt同域名，可省略CORS配置，但Cookie的domain需匹配当前域名。

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