Question

我想使用nestjs api，但是在执行的每个featch中都得到相同的错误消息：

Access to fetch at 'http://localhost:3000/articles' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

我的战线是Angular，我做了一个简单的fetch：

fetch('http://localhost:3000/articles')
    .then((res) => {
      console.log(res);
    });

我在我的nestjs中尝试了此选项，但没有任何效果：

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.enableCors({
    origin: true,
    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
    allowedHeaders: 'Content-Type, Accept',
  });
  await app.listen(3000);
}
bootstrap();

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.enableCors();
  await app.listen(3000);
}
bootstrap();

async function bootstrap() {
  const app = await NestFactory.create(AppModule, {cors: true});
  await app.listen(3000);
}
bootstrap();

Answer 1

在您的main.ts上，按如下所示编辑引导程序功能以启用CORS

const app = await NestFactory.create(AppModule, { cors: true });

或

const app = await NestFactory.create(ApplicationModule);
app.enableCors();

此方法可帮助您为cors传递其他参数

详细了解CORS here

Answer 2

CORS标头的另一种选择是在计算机上站起一个Web服务器（例如Nginix）并通过它代理所有请求，然后根据url根转发到适当的端口。这是现实世界中通常采用的方式，因为CORS标头是相对较新的，并且可能会打开默认情况下您可能不需要的安全漏洞。

这解决了一个基本问题，即您的应用程序在与您要访问的api不同的Origin（协议+域+端口）上运行。

Answer 3

您可以使用cors npm模块。通过运行命令安装cors
npm install cors --save

安装后，在main.ts文件中粘贴以下行。

app.use(cors());

Answer 4

main.ts

const app = await NestFactory.create(AppModule);
app.enableCors({
    origin: '*',
    methods: 'GET, PUT, POST, DELETE',
    allowedHeaders: 'Content-Type, Authorization',
});
await app.listen(3000);

nestjs中的enableCors

4 个答案: