React与Nest.js设置Cookie及CORS跨域问题求助

一、浏览器无法存储Cookie的排查与解决 #

• 核对Cookie核心参数
  必须保证参数和前后端环境匹配：

  • domain：和前端页面域名一致，比如前端是http://localhost:3000，后端是http://localhost:8000，则设为localhost
  • path：设为/，确保全站路径可访问
  • secure：本地开发（http协议）设为false，生产环境（https）设为true
  • sameSite：本地开发用Lax，生产环境配合secure: true设为None
  • httpOnly：可设为true（防XSS），不影响Cookie存储

  Nest.js设置Cookie示例代码：

  res.cookie('access_token', jwtToken, {
    domain: 'localhost',
    path: '/',
    maxAge: 24 * 60 * 60 * 1000,
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    sameSite: process.env.NODE_ENV === 'production' ? 'None' : 'Lax',
  });
  

• 前端请求必须携带凭证
  React中用axios需开启withCredentials：

  axios.post('/api/login', loginData, { withCredentials: true });
  

  用fetch则设置credentials: 'include'：

  fetch('/api/login', {
    method: 'POST',
    credentials: 'include',
    body: JSON.stringify(loginData),
    headers: { 'Content-Type': 'application/json' }
  });
  

二、CORS配置后access-control-allow-origin仍为*的解决 #

Nest.js开启CORS时必须指定具体origin，不能用通配符，同时开启credentials: true。以下是正确配置方式：

全局配置（main.ts） #

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.enableCors({
    origin: 'http://localhost:3000', // 多域名用数组：['http://localhost:3000', 'https://your-prod-domain.com']
    credentials: true,
    allowedHeaders: ['Content-Type', 'Authorization'],
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
  });
  await app.listen(8000);
}
bootstrap();

控制器级别配置（若全局配置不生效，检查是否控制器单独覆盖） #

如果控制器用了@Cors()装饰器，需保证配置和全局一致：

@Controller('auth')
@Cors({
  origin: 'http://localhost:3000',
  credentials: true,
})
export class AuthController {
  // 控制器逻辑
}

常见坑点 #

• 若使用反向代理（如Nginx），需确保代理服务器未覆盖Nest.js返回的CORS头
• 检查是否有安全中间件重置了access-control-allow-origin字段

三、验证步骤 #

1. 打开浏览器开发者工具的Network标签
2. 发送登录请求，查看Response Headers中的Set-Cookie，确认参数符合预期
3. 后续请求查看Request Headers是否包含Cookie，且Origin与配置一致
4. 确认Response Headers中的access-control-allow-origin是指定的前端域名而非*

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