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

nestjs uses the cors module from expressjs/cors https://github.com/expressjs/cors . The `origin: true` property is used per route to enable cors for that specific route. As this is a general change I think I would try to change that to `origin: '*'` to see if it works. Ultimately it should be the domain from where the request is being initiated — VladNeacsu, Oct 22 '19 at 10:23
@VladNeacsu same was ``'*'`` or ``'localhost'`` or ``'localhost:4200'`` — s grace, Oct 22 '19 at 10:32
There must be a non related issue because the second example from your code with `app.enableCors();` seems to work fine. Have you tried restart the application after the change? Also, the port doesn't matter and from the error you're not making a cross domain request — VladNeacsu, Oct 22 '19 at 10:44
What’s the HTTP status code of the response? You can use the Network pane in browser devtools to check. Is it a 4xx or 5xx error rather than a 200 OK success response? — sideshowbarker, Oct 23 '19 at 12:31
Does this answer your question? [NestJS enable cors in production](https://stackoverflow.com/questions/50949231/nestjs-enable-cors-in-production) — cyperpunk, May 07 '21 at 22:49

score 6 · Answer 1 · answered Oct 22 '19 at 11:05

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

score 2 · Answer 2 · answered Oct 23 '19 at 06:30

2

You can make use of cors npm module. Install cors by running the command
npm install cors --save

After installation, in your main.ts file paste the below line.

app.use(cors());

answered Oct 23 '19 at 06:30

Sasuke Uchiha

421
6
17

this is work on my nestjs + serverless + aws – Endy Santoso Apr 04 '23 at 08:28

score 2 · Answer 3 · answered Jun 07 '21 at 22:25

2

main.ts

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

answered Jun 07 '21 at 22:25

Nicolas Bodin

1,431
1
20
25

score 1 · Answer 4 · answered Nov 17 '20 at 21:09

An alternative to CORS headers is to standup a webserver such as Nginix on your computer and proxy all your requests through it, forwarding to the appropriate port based on a url root. This is how things are normally approached in the real world as the CORS headers are relatively new and can open security holes you may not want by default.

This solves the fundamental problem that is your application is running on a different Origin (protocol + domain + port) than the api you want to access.

Enable Cors in NestJs

4 Answers4