Handling CORS in Nest.js

Cross-Origin Resource Sharing (CORS) is a security feature implemented in web browsers to prevent malicious scripts from making unauthorized requests on behalf of the user. However, this feature can also block legitimate requests from different origins, causing issues for developers. In this article, we will explore how to handle CORS in Nest.js applications.

Understanding CORS

CORS is a mechanism that allows web pages to request resources from another domain. By default, web browsers enforce the same-origin policy, which prevents a web page from making requests to a different origin (domain, protocol, or port) than the one the web page was loaded from. CORS provides a way for servers to relax this policy and allow requests from other origins.

CORS Headers

CORS uses a set of HTTP headers to communicate between the client and server. The most important headers are:

• Access-Control-Allow-Origin: specifies the allowed origins
• Access-Control-Allow-Methods: specifies the allowed HTTP methods
• Access-Control-Allow-Headers: specifies the allowed HTTP headers
• Access-Control-Expose-Headers: specifies the exposed HTTP headers

Enabling CORS in Nest.js

Nest.js provides a built-in CORS module that can be used to enable CORS in your application. To enable CORS, you need to add the Cors module to your Nest.js application.

import { CorsOptions } from '@nestjs/common';

const corsOptions: CorsOptions = {
  origin: 'http://example.com',
  methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
  allowedHeaders: 'Content-Type, Accept',
};

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

Configuring CORS Options

The CorsOptions interface provides several properties that can be used to configure CORS:

• origin: specifies the allowed origins
• methods: specifies the allowed HTTP methods
• allowedHeaders: specifies the allowed HTTP headers
• exposedHeaders: specifies the exposed HTTP headers
• credentials: specifies whether credentials are allowed
• maxAge: specifies the maximum age of the CORS configuration

Using CORS with Controllers

You can also use CORS with individual controllers by adding the @EnableCors decorator to the controller.

import { Controller, Get, EnableCors } from '@nestjs/common';

@EnableCors({
  origin: 'http://example.com',
  methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
})
@Controller('example')
export class ExampleController {
  @Get()
  async getExample() {
    return 'Hello World!';
  }
}

Using CORS with Middlewares

You can also use CORS with middlewares by adding the CorsMiddleware to your Nest.js application.

import { MiddlewareConsumer, Module, NestModule } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { CorsMiddleware } from './cors.middleware';

@Module({
  imports: [],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule implements NestModule {
  configure(consumer: MiddlewareConsumer) {
    consumer
      .apply(CorsMiddleware)
      .forRoutes(AppController);
  }
}

Conclusion

In this article, we explored how to handle CORS in Nest.js applications. We discussed the basics of CORS, how to enable CORS in Nest.js, and how to configure CORS options. We also showed how to use CORS with controllers and middlewares.

Frequently Asked Questions

What is CORS?

CORS (Cross-Origin Resource Sharing) is a security feature implemented in web browsers to prevent malicious scripts from making unauthorized requests on behalf of the user.

How do I enable CORS in Nest.js?

You can enable CORS in Nest.js by adding the Cors module to your Nest.js application and configuring the CORS options.

What are the CORS headers?

The CORS headers are Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers, and Access-Control-Expose-Headers.

How do I use CORS with controllers?

You can use CORS with individual controllers by adding the @EnableCors decorator to the controller.

How do I use CORS with middlewares?

You can use CORS with middlewares by adding the CorsMiddleware to your Nest.js application.