NestJS enable cors in production

Question

I've enabled CORS in my NestJS app following the official tutorial, so my main.ts looks like the following:

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

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

and it works when I run the application using npm run start:dev.

However when I try to first compile the application using npm run webpack and then running it using node server.js, the cors will not work.

The http request from the client will fail with:

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access. The response had HTTP status code 404.

check if you have some extension in the browser blocking 3rd javascript, e.g. NoScript and Privacy Badger — Beeno Tung, Aug 16 '19 at 10:49

score 80 · Answer 1 · edited Apr 06 '19 at 14:06

80

Try to use an approach described in here https://docs.nestjs.com/techniques/security#cors

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

edited Apr 06 '19 at 14:06

SharkofMirkwood

11,483
2
17
25

answered Jun 21 '18 at 12:11

Georgii Rychko

801
5
2

Also, I have a question: why do you build your server app using webpack? Usually, just simple `tsc` call is used. – Georgii Rychko Jun 21 '18 at 12:13
2

Thank you but I've already tried this solution and unfortunately it does not work. I compile for production using `npm run webpack` which I guess it's the default way to do it with NestJS, isn't it? – Francesco Borzi Jun 21 '18 at 12:23
1

ShinDarth, have a look at this official example. There you can find how the app gets built https://github.com/nestjs/nest/tree/master/sample/10-fastify. – Georgii Rychko Jun 21 '18 at 13:18
Try to build your app using this example as a basis. – Georgii Rychko Jun 21 '18 at 13:18
1

Here is the compilation command from the `scripts` section of the package.json: ```"prestart:prod": "tsc"```. Just try to play with this example. In case you'll have questions - just put them here. – Georgii Rychko Jun 21 '18 at 13:21
`app.enableCors()` uses default configs which seem to be invalid for some browsers (at least Chrome complains that wildcard is not allowed). Correct way would be to use `app.enableCors({ origin: /.+/ });` – Karolis Mar 06 '19 at 08:07

David Dehghan · Answer 2 · 2019-12-28T04:36:42.667

If you are running NestJs with graphql you will run into a problem where Apollo server will override the CORS setting see link. This below fixed the problem. I wasted 8 hrs of my life on this. :-( I hope you see this and you don't do that. see link and link

        GraphQLModule.forRoot({
            debug: process.env.NODE_ENV !== 'production',
            playground: process.env.NODE_ENV !== 'production',
            typePaths: ['./**/*.graphql'],
            installSubscriptionHandlers: true,
            context: ({req}) => {
                return {req};
            },
            cors: {
                credentials: true,
                origin: true,
            },
        }),

then in your main.ts:

        app.enableCors({
            origin: true,
            methods: 'GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS',
            credentials: true,
        });

score 26 · Answer 3 · answered Apr 05 '22 at 01:48

The documentation for the cors config object is here: https://github.com/expressjs/cors#configuration-options

I noticed nobody used an array for the origin, so in case anyone wanted some quick copy pasta

And in case you were wondering, I researched it too... http and https is considered different and so are subdomains or lack thereof (www.example.com and app.example.com).

app.enableCors({
  origin: [
    'http://localhost:3000',
    'http://example.com',
    'http://www.example.com',
    'http://app.example.com',
    'https://example.com',
    'https://www.example.com',
    'https://app.example.com',
  ],
  methods: ["GET", "POST"],
  credentials: true,
});

score 16 · Answer 4 · answered Jun 08 '20 at 11:54

I was able to get it working by giving my own origin function. The complete enableCors function would be like for NestJS or any NodeJS server like:

var whitelist = ['https://website.com', 'https://www.website.com'];
app.enableCors({
origin: function (origin, callback) {
  if (whitelist.indexOf(origin) !== -1) {
    console.log("allowed cors for:", origin)
    callback(null, true)
  } else {
    console.log("blocked cors for:", origin)
    callback(new Error('Not allowed by CORS'))
  }
},
allowedHeaders: 'X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept, Observe',
methods: "GET,PUT,POST,DELETE,UPDATE,OPTIONS",
credentials: true,
});

and the appOptions if you are using NestJS Express:

const app = await NestFactory.create<NestExpressApplication>(AppModule);

score 8 · Answer 5 · answered Jun 21 '18 at 13:37

Sad to know that you also tried:

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

And it's still not working.

Ensure that on your server side you have cors enabled, which should be something like this:

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Accept');
  next();
});

And also ensure that your browser is cors supported. If all these still doesn't work, I will advice you download Allow-Control-Allow-Origin extension for Chrome, it should fix your issue.

score 6 · Accepted Answer · answered Jun 21 '18 at 15:11

6

Somehow the issue was compiling it using npm run webpack. If I compile it using prestart:prod then it will work.

Thanks @georgii-rychko for suggesting it via comments.

answered Jun 21 '18 at 15:11

Francesco Borzi

56,083
47
179
252

Abolfazl Roshanzamir · Answer 7 · 2021-07-01T11:38:14.967

maybe you get undefined in origin with the following whitelist .If you do not want to block REST tools or server-to-server requests, add a !origin check in the origin function like so:

const whitelist = ['example.com', 'api.example.com'];
app.enableCors({
  origin: function (origin, callback) {
    if (!origin || whitelist.indexOf(origin) !== -1) {
      callback(null, true)
    } else {
      callback(new Error('Not allowed by CORS'))
    }
  },
  ...
});

score 3 · Answer 8 · edited Sep 28 '21 at 21:08

Bellow is my main.ts that finally worked pretty well.

import { NestFactory } from '@nestjs/core';
import { NestExpressApplication } from '@nestjs/platform-express';
import { join } from 'path';
import { AppModule } from './app.module';

async function bootstrap() {
    const app = await NestFactory.create<NestExpressApplication>(
        AppModule,
    );

    app.useStaticAssets(join(__dirname, '..', 'public'));
    app.setBaseViewsDir(join(__dirname, '..', 'views'));
    app.setViewEngine('hbs');

    app.use((req, res, next) => {
        res.header('Access-Control-Allow-Origin', '*');
        res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
        res.header('Access-Control-Allow-Headers', 'Content-Type, Accept');
        next();
    });

    app.enableCors({
        allowedHeaders:"*",
        origin: "*"
    });

    await app.listen(3000);
}

bootstrap();

score 2 · Answer 9 · answered Jun 01 '23 at 04:46

I was using Angular and Nest. So I just enable cors when I create app in main.ts.

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

Another option is:

 app.enableCors({
  origin: ['http://localhost:4200'],
  methods: ['GET', 'POST'],
  credentials: true,
 });

score 1 · Answer 10 · edited Jan 17 '23 at 08:30

1

I tried all the other answers, but found the following works for me

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

edited Jan 17 '23 at 08:30

Eric Aya

69,473
35
181
253

answered Jan 16 '23 at 23:05

oxnull byte

11
2

score 1 · Answer 11 · answered Mar 27 '23 at 16:24

Who wants to use CORS policy dynamically (for example you store origins in the database):

app.enableCors({
    credentials: true,
    origin: async (requestOrigin: string, next: (err: Error | null, origin?: string[]) => void) => {
        const origins = await app.get(AppService).getOrigins();

        // origins: StaticOrigin = ['https://google.com', 'http://localhost'];
        next(null, origins);
    },
});

Anthony · Answer 12 · 2021-12-19T20:08:13.537

0

None of the answers had worked until I realized nest start would run with no issues when I deleted my main.ts file.

Check that your main.ts is actually being called.

If it's not, deleting the /dist folder should do the trick.

edited Dec 19 '21 at 20:08

answered Dec 17 '21 at 23:19

Anthony

119
2
4

score 0 · Answer 13 · answered Apr 16 '22 at 05:56

0

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

answered Apr 16 '22 at 05:56

Shuvro

222
3
7

score 0 · Answer 14 · answered Jul 29 '22 at 11:37

0

I had to enable cors in azure. Just in case somebody has the same problem

answered Jul 29 '22 at 11:37

Just A Question

423
6
21

score 0 · Answer 15 · answered Sep 29 '22 at 15:39

you need to ensure that the response will come with the correct header. Exemple, if you want to release all origins then the header should look like this:

Access-Control-Allow-Origin: *

And for this, use:

const app = await NestFactory.create<NestExpressApplication>(AppModule);
app.enableCors();

you need to check these details before coding.

score -1 · Answer 16 · answered Jul 07 '21 at 13:04

-1

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

async function bootstrap() {
  const PORT = 5000;
  const app = await NestFactory.create(AppModule);

  app.enableCors({credentials: true, origin: "http://localhost:3000"});

  await app.listen(PORT, () => console.log(`Server started`));
}

bootstrap();

Instead of "http://localhost:3000" paste your url client

answered Jul 07 '21 at 13:04

Leonar

1

1

What's the question? – Lajos Arpad Jul 07 '21 at 18:16

score -2 · Answer 17 · answered Aug 06 '22 at 18:25

-2

run on production mode

npm run start:prod

answered Aug 06 '22 at 18:25

Anojan

297
2
4

NestJS enable cors in production

17 Answers17

Linked