NestJS 配置CORS策略对接React前端时遭遇跨域错误

看起来你在NestJS和React前端的跨域配置上踩了个小坑，我来帮你捋一捋问题出在哪，以及怎么解决~

问题根源：重复的CORS配置冲突 #

你当前的代码里同时做了三件和跨域相关的操作，这些操作会互相干扰，导致浏览器抛出跨域错误：

• 创建Nest应用时传入了{ cors: true }，开启了默认CORS配置
• 自定义了一个中间件手动设置Access-Control-Allow-Origin响应头
• 又调用app.enableCors()配置了更具体的跨域规则

浏览器对跨域响应头的要求很严格，重复的头信息会直接触发错误，这就是你遇到问题的核心原因。

解决方案：统一用官方推荐的CORS配置方式 #

我们只保留最灵活且官方推荐的app.enableCors()配置，移除其他重复的跨域相关代码，具体修改如下：

修改后的NestJS启动代码

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import helmet from 'helmet';
import * as cookieParser from 'cookie-parser';

async function bootstrap() {
  // 移除创建应用时的{ cors: true }参数
  const app = await NestFactory.create(AppModule);

  // 只保留这一段CORS配置，这是官方推荐的自定义跨域规则方式
  app.enableCors({
    origin: process.env.FRONT_URL, // 确保这个环境变量是你的前端地址，比如"http://localhost:3000"
    credentials: true, // 允许携带cookie等凭证
    // 可选：根据业务需求添加允许的请求头和方法
    allowedHeaders: ['Content-Type', 'Authorization'],
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
  });

  app.setGlobalPrefix('api');
  app.use(helmet());
  app.use(cookieParser());
  await app.listen(process.env.HOST || 3001);
}
bootstrap();

前端Axios配置注意事项

因为你开启了credentials: true，所以React端的Axios请求必须带上withCredentials: true，否则cookie等凭证无法正常传递：

// React项目中Axios的配置示例
import axios from 'axios';

// 创建全局Axios实例
const apiClient = axios.create({
  baseURL: 'http://localhost:3001/api', // 对应你的NestAPI地址
  withCredentials: true, // 必须开启这个才能携带跨域凭证
});

// 后续用这个实例发起请求
apiClient.get('/your-api-endpoint')
  .then(response => console.log('请求成功:', response.data))
  .catch(error => console.error('请求失败:', error));

额外检查点 #

1. 确保环境变量FRONT_URL的值正确：比如前端运行在http://localhost:3000，那这个变量就设为这个值（不要加末尾的斜杠）
2. 如果生产环境部署，要把FRONT_URL替换成你的前端正式域名
3. Helmet默认配置一般不会影响CORS，如果后续还有问题，可以检查Helmet的内容安全策略是否限制了跨域请求

备注：内容来源于stack exchange，提问作者Ahmad Software