CORS configuration in NestJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does CORS stand for and why is it important in web development?

CORS stands for Cross-Origin Resource Sharing. It is important because it controls how resources on a web server can be requested from another domain, helping to keep web applications secure by preventing unauthorized access.

beginner

How do you enable CORS in a NestJS application?

You enable CORS in NestJS by calling the enableCors() method on the app instance, usually in the main.ts file, like app.enableCors(). You can also pass options to customize the behavior.

intermediate

What is the purpose of the origin option in NestJS CORS configuration?

The origin option specifies which domains are allowed to access the server resources. It can be a string, an array of strings, or a function to dynamically allow or deny requests from certain origins.

intermediate

How can you restrict CORS to allow only specific HTTP methods in NestJS?

You can restrict allowed HTTP methods by setting the methods option in the enableCors() configuration, for example: app.enableCors({ methods: ['GET', 'POST'] }).

beginner

What happens if you do not configure CORS in a NestJS API that is accessed from a different domain?

If CORS is not configured, browsers will block requests made from different domains for security reasons. This means your frontend app on another domain won't be able to access your NestJS API.

Which NestJS method is used to enable CORS?

A app.enableCors()

B app.useCors()

C app.setCors()

D app.configureCors()

The correct method to enable CORS in NestJS is app.enableCors().

What does the 'origin' option in CORS configuration control?

A The server port number

B Which HTTP methods are allowed

C Which domains can access the server

D The response format

The 'origin' option controls which domains are allowed to access the server resources.

If you want to allow only GET and POST requests from other domains, which option should you set?

A allowedMethods: ['GET', 'POST']

B corsMethods: ['GET', 'POST']

C httpMethods: ['GET', 'POST']

D methods: ['GET', 'POST']

The correct option is 'methods' to specify allowed HTTP methods in CORS.

What will happen if CORS is not enabled on a NestJS API accessed from a different domain?

A The API will work normally

B The browser will block the request

C The server will crash

D The request will be redirected

Browsers block cross-origin requests if CORS is not enabled for security.

Can the 'origin' option in NestJS CORS configuration accept a function?

A Yes, to dynamically allow or deny origins

B No, only strings are allowed

C No, only arrays are allowed

D Yes, but only for logging purposes

The 'origin' option can be a function to dynamically control allowed origins.

Explain how to enable and customize CORS in a NestJS application.

Think about the main.ts file and the enableCors method.

Describe what problems CORS solves and what happens if it is not configured properly in NestJS.

Consider browser security and 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