Enable Cors in NestJs

Question

I want to use a NestJs api, but I get the same error message in each fetch:

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.

My frontend is an Angular, where I have a simple fetch :

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

I tried these options in my NestJs - but none of them seem to work:

Attempt A

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();

Attempt B

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

Attempt C

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

Answer 1

On your main.ts, edit bootstrap function as follows to enable CORS

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

Or

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

This method helps you to pass additional params for cors

Read more about CORS here