NextJS对接NestJS后端时Set-Cookie头被浏览器忽略问题

1. 检查Cookie的SameSite属性 #

• 后端Set-Cookie时若将SameSite设为Strict或Lax，且前后端跨域的话，浏览器不会自动携带Cookie。需将SameSite设为None，同时必须搭配Secure属性（仅HTTPS环境生效，本地开发可使用localhost或配置HTTPS）。
• NestJS/Fastify中配置Cookie的示例：

  // 登录接口返回Cookie时的配置
  res.cookie('accessToken', token, {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production', // 生产环境开启Secure
    sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax', // 跨域场景设为None
    maxAge: 3600000, // 1小时有效期
    path: '/' // 确保Cookie在所有路径下可用
  });
  

2. 确认后端跨域（CORS）配置 #

• 后端必须配置CORS，允许前端Origin，同时开启允许携带凭证的选项。
• NestJS/Fastify的CORS配置示例（main.ts）：

  import { NestFactory } from '@nestjs/core';
  import { FastifyAdapter, NestFastifyApplication } from '@nestjs/platform-fastify';
  import { AppModule } from './app.module';
  
  async function bootstrap() {
    const app = await NestFactory.create<NestFastifyApplication>(
      AppModule,
      new FastifyAdapter(),
    );
    app.enableCors({
      origin: process.env.FRONTEND_URL, // 例如http://localhost:3000
      credentials: true, // 必须开启，允许携带凭证
      allowedHeaders: ['Content-Type', 'Authorization'],
    });
    await app.listen(3001);
  }
  bootstrap();
  

3. 前端Fetch请求的细节验证 #

• 所有需要携带Cookie的请求必须显式设置credentials: 'include'，Next.js 13客户端组件中fetch默认的credentials是same-origin，跨域场景必须手动指定。
• 示例：

  async function fetchUserInfo() {
    const res = await fetch('http://localhost:3001/api/user', {
      method: 'GET',
      credentials: 'include', // 必须添加
      headers: {
        'Content-Type': 'application/json',
      },
    });
    const data = await res.json();
    return data;
  }
  

4. 检查Cookie的Domain属性 #

• 若前后端域名/端口不一致（如前端localhost:3000，后端localhost:3001），Domain属性可设为localhost，或不设置（浏览器会默认绑定当前域名，跨端口属于同一域名范畴，通常无需额外配置）。避免将Domain设为过于严格的子域名，导致Cookie无法被前端携带。

5. 本地开发环境的HTTPS适配 #

• 若生产环境后端用HTTPS，本地开发使用HTTP时，若设置Secure: true，浏览器不会保存Cookie。此时需将secure设为false，或给本地服务配置HTTPS（比如用mkcert生成自签名证书）。

6. 验证浏览器Cookie存储状态 #

• 打开浏览器开发者工具的Application标签，查看Cookies选项，确认accessToken是否已被正确存储。若未存储，说明后端的Set-Cookie头存在配置问题（如SameSite、Secure、Domain参数错误）。

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