使用NestJS框架配置enableCors仍出现CORS错误如何解决

1. 调整enableCors调用顺序 #

CORS配置需要在所有请求处理中间件之前注册，你当前代码先注册了helmet、express解析中间件，再配置CORS，会导致预检请求被前面的中间件处理后返回，丢失CORS相关响应头。
修改后的核心代码如下：

const app = await NestFactory.create<NestExpressApplication>(AppModule);
// 最先配置CORS规则
app.enableCors({
  origin: "http://localhost:4000", // 显式指定允许的前端源，生产环境按需替换为实际域名
  credentials: true, // 如果请求需要携带Cookie可以开启，无需则可删除该行
  allowedHeaders: "Content-Type,Authorization",
  methods: "GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS"
});
// 再注册其他中间件
app.setBaseViewsDir(join(__dirname, '..', 'views'))
app.setViewEngine('hbs')
app.use(helmet());
app.use(express.json({ limit: "50mb" }))
app.use(express.urlencoded({ limit: "50mb" }))
app.use(cookieParser());

2. 备选方案：实例化应用时直接配置CORS #

你也可以直接在NestFactory.create的第二个参数中配置CORS，优先级更高，可以完全避免调用顺序导致的问题：

const app = await NestFactory.create<NestExpressApplication>(AppModule, {
  cors: {
    origin: "http://localhost:4000",
    credentials: true
  }
});
// 后续其他中间件注册逻辑保持不变

3. 额外排查项 #

• 如果你使用了helmet，默认的跨域资源策略可能会和CORS配置冲突，可以调整helmet配置：

app.use(helmet({
  crossOriginResourcePolicy: { policy: "cross-origin" }
}));

• 确认你请求的后端接口确实存在，404、500等异常响应默认不会携带CORS头，也会抛出相同的错误，可以先用Postman等工具直接调用后端接口，确认接口能正常返回响应。

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