Nestjs项目实战跨域资源共享(CORS)配置详解

我在Nestjs项目中配置CORS时遇到了一些问题，想请教大家：

按照官方文档配置了app.enableCors()，但前端请求仍然被拦截，是不是遗漏了什么必要配置项？
如何在Nestjs中针对特定路由设置CORS策略？比如只想允许/api开头的路由跨域访问
测试时发现OPTIONS预检请求总是失败，正确的响应头应该怎么配置？
生产环境是否需要关闭CORS？如果保留的话，怎样设置才能确保安全性？
使用@nestjs/platform-express和@nestjs/platform-fastify在CORS配置上有什么区别吗？

我的开发环境是Nestjs 9.x版本，希望有经验的朋友能分享下实际项目中的最佳实践。

zlyuanteng 1楼

在NestJS项目中实现跨域资源共享（CORS），你可以通过以下步骤完成配置：

安装Cors中间件
使用npm或yarn安装[@nestjs](/user/nestjs)/cors包：
```
npm install [@nestjs](/user/nestjs)/cors
```

引入Cors模块
在app.module.ts中导入并配置CorsModule：

import { Module } from '[@nestjs](/user/nestjs)/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { CorsModule } from '[@nestjs](/user/nestjs)/cors';

[@Module](/user/Module)({
  imports: [CorsModule.register({ origin: '*' })],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

自定义配置
可以根据需求设置具体的选项，例如允许的来源、请求方法等：

CorsModule.register({
  origin: 'http://example.com', // 允许的域名
  methods: ['GET', 'POST'],     // 允许的HTTP方法
  credentials: true,            // 是否允许发送Cookie
});

全局与局部应用

全局配置：如上例所示，注册在根模块即可。

局部配置：通过控制器级别使用装饰器：

import { Controller, Get } from '[@nestjs](/user/nestjs)/common';
import { CorsOptions } from '[@nestjs](/user/nestjs)/cors';

@Controller({
  cors: {
    origin: 'http://another-example.com',
  },
})
export class MyController {}

通过以上步骤，你可以轻松地为NestJS项目添加CORS支持。注意，生产环境中建议明确指定允许的域名，而非使用'*'。

yibo5220 2楼

在NestJS项目中配置跨域资源共享（CORS），可以使用内置的@nestjs/common模块中的CorsOptions和cors中间件。

首先安装依赖：npm install --save @nestjs/common

然后在main.ts文件中配置CORS。以下是详细步骤：

导入必要的模块：

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

定义CORS选项：

const corsOptions: CorsOptions = {
  origin: 'http://example.com', // 允许的前端域名
  methods: ['GET', 'HEAD', 'PUT', 'PATCH', 'POST', 'DELETE'], // 允许的HTTP方法
  allowedHeaders: ['Content-Type', 'Authorization'], // 允许的请求头
  credentials: true, // 是否允许发送Cookie
};

在应用实例化时启用CORS：

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.enableCors(corsOptions); // 启用CORS
  await app.listen(3000);
}
bootstrap();

这样就完成了基本的CORS配置。可以根据需求调整origin和其他参数，例如允许所有来源可设置为'*'。

htzhanglong 3楼

在NestJS项目中配置CORS的详细方法如下：

全局配置方式（推荐）在main.ts文件中通过app.enableCors()方法配置：

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

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  
  // 基本配置
  app.enableCors();
  
  // 或详细配置
  app.enableCors({
    origin: ['https://example.com', 'http://localhost:3000'],
    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
    allowedHeaders: 'Content-Type,Authorization',
    credentials: true,
    maxAge: 3600,
  });
  
  await app.listen(3000);
}
bootstrap();

控制器/路由级别配置使用@Header()装饰器进行细粒度控制：

import { Controller, Get, Header } from '@nestjs/core';

@Controller('cats')
export class CatsController {
  @Get()
  [@Header](/user/Header)('Access-Control-Allow-Origin', '*')
  findAll() {
    return 'All cats';
  }
}

常用配置项说明：

origin：允许的源（字符串/数组/正则/func）
methods：允许的HTTP方法
allowedHeaders：允许的请求头
exposedHeaders：暴露给浏览器的响应头
credentials：是否允许发送cookie
maxAge：预检请求缓存时间

生产环境建议：

app.enableCors({
  origin: process.env.ALLOWED_ORIGINS.split(','),
  credentials: true
});

注意：开发环境可以暂时开启全部跨域(origin: true)，但生产环境务必指定具体域名。

Nestjs项目实战 跨域资源共享(CORS)配置详解

Nestjs项目实战跨域资源共享(CORS)配置详解