CORS configuration in NestJS - Step-by-Step Execution

Concept Flow - CORS configuration

Client sends request

↓

Server receives request

↓

Check Origin header

↓

Add CORS headers

↓

Send response

The server checks the request origin and adds CORS headers if allowed, enabling the browser to accept the response.

Execution Sample

NestJS

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

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.enableCors({ origin: 'https://example.com' });
  await app.listen(3000);
}

bootstrap();

This code enables CORS in a NestJS app allowing requests only from https://example.com.

Execution Table

Step	Action	Request Origin	CORS Allowed?	CORS Headers Added	Response Behavior
1	Client sends request	https://example.com	Yes	Access-Control-Allow-Origin: https://example.com	Response accepted by browser
2	Client sends request	https://notallowed.com	No	No CORS headers	Browser blocks response
3	Client sends request	No Origin header	No	No CORS headers	Browser blocks response or no CORS needed
4	Server listens on port 3000	-	-	-	Ready to handle requests

💡 Requests from origins not allowed by CORS config do not receive CORS headers, so browsers block their responses.

Variable Tracker

Variable	Start	After Request 1	After Request 2	After Request 3	Final
origin	undefined	https://example.com	https://notallowed.com	undefined	varies per request
corsAllowed	false	true	false	false	varies per request
corsHeadersAdded	false	true	false	false	varies per request

Key Moments - 2 Insights

Why does the browser block the response when the origin is not allowed?

Because the server does not add CORS headers for disallowed origins (see execution_table step 2), so the browser enforces security and blocks the response.

What happens if the request has no Origin header?

The server treats it as a non-CORS request and does not add CORS headers (execution_table step 3), so the browser may block or allow depending on context.

Visual Quiz - 3 Questions

Look at the execution table, what CORS header is added when the origin is https://example.com?

A No CORS header added

B Access-Control-Allow-Origin: https://example.com

C Access-Control-Allow-Origin: *

D Access-Control-Allow-Methods: GET

💡 Hint

Check execution_table row 1 under 'CORS Headers Added'

At which step does the browser block the response due to missing CORS headers?

A Step 2

B Step 1

C Step 4

D Step 3

💡 Hint

Look at execution_table rows where 'CORS Allowed?' is No and 'Response Behavior'

If you change the origin option to '*' in enableCors, how would the 'CORS Allowed?' column change?

A No origins allowed

B Only https://example.com allowed

C All origins allowed

D Only localhost allowed

💡 Hint

Changing origin to '*' means all origins pass the check, see concept_flow decision step

Concept Snapshot

NestJS CORS configuration:
- Use app.enableCors() in bootstrap
- Pass options like { origin: 'https://example.com' }
- Server checks request Origin header
- Adds Access-Control-Allow-Origin if allowed
- Browser blocks responses without proper CORS headers
- Helps secure cross-origin requests

Full Transcript

In NestJS, CORS configuration controls which origins can access your server. When a client sends a request, the server checks the Origin header. If the origin is allowed, the server adds CORS headers like Access-Control-Allow-Origin to the response. This tells the browser it is safe to accept the response. If the origin is not allowed, the server does not add these headers, so the browser blocks the response for security. You enable CORS in NestJS by calling app.enableCors() with options specifying allowed origins. This setup helps protect your API from unauthorized cross-origin requests.