cors middleware setup in Express - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the CORS middleware.

Express

const cors = require('[1]');

Drag options to blanks, or click blank then click option'

Aexpress

Bcors

Chttp

Dbody-parser

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'express' instead of 'cors' in require statement.

Forgetting to import the CORS middleware.

The CORS middleware is imported using require('cors').

2fill in blank

medium

Complete the code to apply CORS middleware globally in the Express app.

Express

app.use([1]());

Drag options to blanks, or click blank then click option'

Acors

Bexpress

CbodyParser

Dhelmet

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'express()' instead of 'cors()' in app.use.

Not calling the middleware function with parentheses.

Use cors() as middleware to enable CORS for all routes.

3fill in blank

hard

Fix the error in the CORS options object to allow only requests from 'https://example.com'.

Express

app.use(cors({ origin: [1] }));

Drag options to blanks, or click blank then click option'

Afalse

B'*'

Ctrue

D'https://example.com'

Attempts:

3 left

💡 Hint

Common Mistakes

Using '*' allows all origins, not just the specific one.

Using boolean values instead of a string URL.

Setting origin to the specific URL string restricts CORS to that domain.

4fill in blank

hard

Fill both blanks to configure CORS to allow credentials and restrict origin to 'https://myapp.com'.

Express

app.use(cors({ origin: [1], [2]: true }));

Drag options to blanks, or click blank then click option'

A'https://myapp.com'

B'*'

Ccredentials

Dmethods

Attempts:

3 left

💡 Hint

Common Mistakes

Using '*' for origin when restricting to a specific domain.

Using 'methods' instead of 'credentials' to allow credentials.

Set origin to the allowed URL and credentials to true to allow cookies and auth headers.

5fill in blank

hard

Fill all three blanks to create a CORS middleware that allows origin 'https://site.com', credentials, and only GET and POST methods.

Express

app.use(cors({ origin: [1], [2]: true, [3]: ['GET', 'POST'] }));

Drag options to blanks, or click blank then click option'

A'https://site.com'

Bcredentials

Cmethods

D'*'

Attempts:

3 left

💡 Hint

Common Mistakes

Using '*' for origin when restricting to a specific domain.

Omitting the credentials option when cookies are needed.

Using incorrect option names like 'methodsAllowed' instead of 'methods'.

Set origin to the allowed URL, credentials to true, and methods to the allowed HTTP methods array.

Practice

1. What is the main purpose of using the cors middleware in an Express app?

easy

A. To allow or restrict which websites can access your server resources

B. To handle database connections securely

C. To serve static files like images and CSS

D. To log HTTP requests for debugging

Solution

1. Step 1: Understand what CORS controls

   CORS stands for Cross-Origin Resource Sharing and it controls which external websites can access your server's resources.

2. Step 2: Identify the role of the middleware

   The cors middleware in Express is used to set these access rules to allow or restrict cross-origin requests.

3. Final Answer:

   To allow or restrict which websites can access your server resources -> Option A

4. Quick Check:

   CORS controls access permissions = B [OK]

Hint: Remember CORS controls cross-site access permissions [OK]

Common Mistakes:

• Confusing CORS with logging or static file serving
• Thinking CORS manages database security
• Assuming CORS is for request logging

2. Which of the following is the correct way to enable CORS for all routes in an Express app?

easy

A. app.use(cors());

B. app.use(cors);

C. app.cors();

D. app.enable(cors);

Solution

1. Step 1: Recall the syntax for middleware usage

   In Express, middleware functions are passed as functions, so you must call cors() to get the middleware function.

2. Step 2: Identify the correct usage

   app.use(cors()); correctly calls the cors function and applies it to all routes.

3. Final Answer:

   app.use(cors()); -> Option A

4. Quick Check:

   Middleware needs function call = A [OK]

Hint: Always call middleware functions with parentheses [OK]

Common Mistakes:

• Forgetting parentheses after cors
• Using app.cors() which is not a method
• Trying app.enable(cors) which is invalid

3. Given this Express code snippet, what will be the CORS behavior?

import express from 'express';
import cors from 'cors';
const app = express();

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

app.get('/data', (req, res) => {
  res.json({ message: 'Hello' });
});

app.listen(3000);

medium

A. Only POST requests from any origin are allowed

B. All origins are allowed to access /data

C. Only requests from https://example.com will be allowed by browsers

D. No origins are allowed, CORS is disabled

Solution

1. Step 1: Analyze the CORS options

   The cors middleware is configured with { origin: 'https://example.com' }, which restricts access to that origin only.

2. Step 2: Understand the effect on requests

   Browsers will allow cross-origin requests only from https://example.com. Requests from other origins will be blocked by the browser.

3. Final Answer:

   Only requests from https://example.com will be allowed by browsers -> Option C

4. Quick Check:

   Origin option restricts access = D [OK]

Hint: Check the origin option to know allowed sites [OK]

Common Mistakes:

• Assuming all origins are allowed by default
• Thinking CORS disables all requests without origin option
• Confusing HTTP methods with origin restrictions

4. Identify the error in this Express CORS setup:

import express from 'express';
import cors from 'cors';
const app = express();

app.use(cors);

app.get('/', (req, res) => res.send('Hi'));

app.listen(3000);

medium

A. app.listen should be called before app.use

B. cors should be imported from 'express-cors' package

C. No error, this code works fine

D. Missing parentheses after cors in app.use

Solution

1. Step 1: Check how cors middleware is applied

   The code uses app.use(cors); but cors is a function that must be called to return middleware.

2. Step 2: Correct usage requires parentheses

   The correct syntax is app.use(cors()); to apply the middleware properly.

3. Final Answer:

   Missing parentheses after cors in app.use -> Option D

4. Quick Check:

   Middleware must be called = C [OK]

Hint: Middleware needs parentheses to run correctly [OK]

Common Mistakes:

• Forgetting to call cors() as a function
• Importing cors from wrong package
• Thinking app.listen order affects middleware

5. You want to allow CORS only for GET and POST requests from https://myapp.com but block others. Which setup correctly achieves this?

hard

A. app.use(cors({ origin: '*', methods: ['GET', 'POST'] }));

B. app.use(cors({ origin: 'https://myapp.com', methods: ['GET', 'POST'] }));

C. app.use(cors({ origin: 'https://myapp.com' })); // methods ignored

D. app.use(cors({ methods: ['GET', 'POST'] }));

Solution

1. Step 1: Understand the origin restriction

   To allow only https://myapp.com, set origin: 'https://myapp.com'.

2. Step 2: Restrict HTTP methods

   Use methods: ['GET', 'POST'] to allow only those request types.

3. Step 3: Combine both options correctly

   app.use(cors({ origin: 'https://myapp.com', methods: ['GET', 'POST'] })); correctly sets both origin and methods to restrict access as required.

4. Final Answer:

   app.use(cors({ origin: 'https://myapp.com', methods: ['GET', 'POST'] })); -> Option B

5. Quick Check:

   Origin + methods options restrict access = A [OK]

Hint: Set both origin and methods to restrict CORS properly [OK]

Common Mistakes:

• Using '*' origin allows all sites
• Ignoring methods option when restricting HTTP verbs
• Assuming methods alone restrict origin