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.

Practice

1. What is the main purpose of enabling CORS in a NestJS application?

easy

A. To encrypt data between client and server

B. To speed up the server response time

C. To manage database connections

D. To allow web browsers from specific origins to access the backend resources

Solution

1. Step 1: Understand CORS purpose

   CORS (Cross-Origin Resource Sharing) controls which websites can access backend resources from a different origin.

2. Step 2: Identify correct purpose in NestJS

   Enabling CORS in NestJS allows specific web origins to access the backend safely.

3. Final Answer:

   To allow web browsers from specific origins to access the backend resources -> Option D

4. Quick Check:

   CORS controls access by origin = C [OK]

Hint: CORS controls which websites can access your backend [OK]

Common Mistakes:

• Confusing CORS with encryption
• Thinking CORS speeds up server
• Mixing CORS with database management

2. Which of the following is the correct way to enable CORS with default settings in a NestJS app?

easy

A. app.setCors(true)

B. app.enableCors({ origin: '*' })

C. app.enableCors()

D. app.useCors()

Solution

1. Step 1: Recall NestJS CORS enabling method

   The official method to enable CORS is app.enableCors() without parameters for default settings.

2. Step 2: Check options for correctness

   Options B, C, and D are not valid NestJS methods or have incorrect syntax.

3. Final Answer:

   app.enableCors() -> Option C

4. Quick Check:

   Default CORS enable = app.enableCors() [OK]

Hint: Use app.enableCors() to enable CORS simply [OK]

Common Mistakes:

• Using incorrect method names like setCors or useCors
• Passing invalid parameters to enableCors
• Confusing CORS enabling with middleware usage

3. Given this NestJS code snippet, what will be the allowed origin for CORS?

app.enableCors({ origin: 'https://example.com' });

medium

A. Only https://example.com can access the backend

B. All websites can access the backend

C. No websites can access the backend

D. Only localhost can access the backend

Solution

1. Step 1: Analyze the origin option in enableCors

   The origin option is set to 'https://example.com', which restricts access to this exact origin.

2. Step 2: Understand CORS behavior with origin setting

   Only requests coming from 'https://example.com' will be allowed by CORS policy.

3. Final Answer:

   Only https://example.com can access the backend -> Option A

4. Quick Check:

   origin restricts access = B [OK]

Hint: Origin option limits access to specified URL only [OK]

Common Mistakes:

• Assuming origin '*' is default
• Thinking multiple origins allowed without array
• Confusing origin with methods or headers

4. Identify the error in this NestJS CORS configuration code:

app.enableCors({ origins: ['https://site1.com', 'https://site2.com'] });

medium

A. The array syntax is invalid for origins

B. The property 'origins' is incorrect; it should be 'origin'

C. enableCors does not accept any options

D. The URLs must be strings without 'https://'

Solution

1. Step 1: Check property name for allowed origins

   The correct property name is 'origin' (singular), not 'origins'.

2. Step 2: Confirm array usage for multiple origins

   Passing an array to 'origin' is valid to allow multiple origins.

3. Final Answer:

   The property 'origins' is incorrect; it should be 'origin' -> Option B

4. Quick Check:

   Correct property name is origin = A [OK]

Hint: Use 'origin' not 'origins' for CORS config [OK]

Common Mistakes:

• Using 'origins' instead of 'origin'
• Thinking enableCors rejects options
• Removing protocol from URLs

5. You want to allow CORS only for GET and POST methods from two specific domains: https://app1.com and https://app2.com. Which is the correct NestJS CORS configuration?

hard

A. app.enableCors({ origin: ['https://app1.com', 'https://app2.com'], methods: ['GET', 'POST'] });

B. app.enableCors({ origins: ['https://app1.com', 'https://app2.com'], methods: 'GET,POST' });

C. app.enableCors({ origin: '*', methods: ['GET', 'POST'] });

D. app.enableCors({ origin: ['https://app1.com', 'https://app2.com'], method: ['GET', 'POST'] });

Solution

1. Step 1: Verify property names and values

   The property for allowed origins is 'origin' (singular), and it accepts an array for multiple domains. The 'methods' property accepts an array of HTTP methods.

2. Step 2: Check each option for correctness

   app.enableCors({ origin: ['https://app1.com', 'https://app2.com'], methods: ['GET', 'POST'] }); uses correct property names and value types. app.enableCors({ origins: ['https://app1.com', 'https://app2.com'], methods: 'GET,POST' }); uses 'origins' (incorrect) and methods as a string (less preferred). app.enableCors({ origin: '*', methods: ['GET', 'POST'] }); allows all origins ('*'), which is not desired. app.enableCors({ origin: ['https://app1.com', 'https://app2.com'], method: ['GET', 'POST'] }); uses 'method' (singular), which is incorrect.

3. Final Answer:

   app.enableCors({ origin: ['https://app1.com', 'https://app2.com'], methods: ['GET', 'POST'] }); -> Option A

4. Quick Check:

   Correct keys and array values = D [OK]

Hint: Use 'origin' and 'methods' with arrays for multiple values [OK]

Common Mistakes:

• Using 'origins' instead of 'origin'
• Passing methods as comma string instead of array
• Using 'method' instead of 'methods'
• Allowing all origins with '*' when not intended