Why CORS matters for APIs in Express - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to enable CORS in an Express app.

Express

const express = require('express');
const cors = require('[1]');
const app = express();
app.use(cors());
app.listen(3000);

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

Aexpress

Bhttp

Ccors

Dbody-parser

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'express' instead of 'cors' for CORS middleware.

Forgetting to require the 'cors' package.

The cors package is used to enable CORS in Express apps.

2fill in blank

medium

Complete the code to allow only requests from 'https://example.com'.

Express

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

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

Anull

B*

Chttp://localhost:3000

Dhttps://example.com

Attempts:

3 left

💡 Hint

Common Mistakes

Using '*' which allows all origins instead of a specific URL.

Using 'null' which blocks all origins.

Setting origin to 'https://example.com' restricts access to that domain only.

3fill in blank

hard

Fix the error in the CORS setup to allow credentials.

Express

app.use(cors({ origin: 'https://myapp.com', credentials: [1] }));

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

A1

Btrue

C'true'

D'yes'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'true' as a string instead of boolean true.

Using numbers or other strings instead of boolean.

The credentials option expects a boolean true, not a string.

4fill in blank

hard

Fill both blanks to restrict CORS to GET and POST methods only.

Express

app.use(cors({ methods: ['[1]', '[2]'] }));

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

AGET

BPOST

CPUT

DDELETE

Attempts:

3 left

💡 Hint

Common Mistakes

Including methods like PUT or DELETE which are not allowed here.

Using lowercase method names instead of uppercase.

Specifying methods limits allowed HTTP methods to GET and POST.

5fill in blank

hard

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

Express

app.use(cors({ origin: '[1]', credentials: [2], methods: ['[3]'] }));

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

Ahttps://site.com

BTrue

CGET

DPOST

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'true' as a string for credentials.

Using wrong origin URL or method names in lowercase.

This config allows only 'https://site.com' origin, sends credentials, and permits only GET requests.

Practice

1. What is the main reason CORS is important for APIs in Express?

easy

A. It encrypts the data sent by the API.

B. It speeds up the API response time.

C. It automatically logs all API requests.

D. It controls which websites can access your API to protect it.

Solution

1. Step 1: Understand CORS purpose

   CORS stands for Cross-Origin Resource Sharing and it controls which websites can call your API.

2. Step 2: Identify protection role

   By controlling access, CORS protects your API from unwanted or malicious websites.

3. Final Answer:

   It controls which websites can access your API to protect it. -> Option D

4. Quick Check:

   CORS controls access = D [OK]

Hint: Remember: CORS controls access, not speed or encryption [OK]

Common Mistakes:

• Thinking CORS speeds up API
• Confusing CORS with logging
• Believing CORS encrypts data

2. Which Express middleware is commonly used to enable CORS?

easy

A. cors

B. express-session

C. body-parser

D. morgan

Solution

1. Step 1: Recall Express middleware for CORS

   The npm package named 'cors' is the standard middleware to enable CORS in Express.

2. Step 2: Identify other middleware roles

   express-session manages sessions, body-parser parses request bodies, morgan logs requests, none handle CORS.

3. Final Answer:

   cors -> Option A

4. Quick Check:

   Enable CORS with 'cors' middleware = B [OK]

Hint: Use 'cors' package to enable CORS in Express apps [OK]

Common Mistakes:

• Choosing body-parser for CORS
• Confusing logging middleware with CORS
• Using session middleware for CORS

3. What will happen if an API does NOT set CORS headers and a browser tries to call it from another website?

medium

A. The browser will block the request due to CORS policy.

B. The API will respond faster without CORS headers.

C. The API will automatically allow all websites.

D. The browser will ignore CORS and allow the request.

Solution

1. Step 1: Understand browser CORS enforcement

   Browsers enforce CORS by blocking cross-origin requests if the server does not send proper CORS headers.

2. Step 2: Identify consequences of missing CORS headers

   Without CORS headers, the browser blocks the request; the API itself may respond but browser denies access.

3. Final Answer:

   The browser will block the request due to CORS policy. -> Option A

4. Quick Check:

   Missing CORS headers = browser blocks request = A [OK]

Hint: No CORS headers means browser blocks cross-site calls [OK]

Common Mistakes:

• Thinking API blocks request instead of browser
• Assuming API allows all without CORS
• Believing browser ignores CORS

4. Consider this Express code snippet:

const express = require('express');
const app = express();

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

app.listen(3000);

What is missing to allow cross-origin requests safely?

medium

A. Adding a body-parser middleware.

B. Changing app.get to app.post.

C. Adding CORS middleware to set proper headers.

D. Using HTTPS instead of HTTP.

Solution

1. Step 1: Identify missing CORS headers

   The code does not include any middleware to set CORS headers, so cross-origin requests will be blocked by browsers.

2. Step 2: Recognize correct fix

   Adding CORS middleware (like 'cors' package) will add headers to allow safe cross-origin requests.

3. Final Answer:

   Adding CORS middleware to set proper headers. -> Option C

4. Quick Check:

   Add CORS middleware to allow cross-origin = A [OK]

Hint: Add 'cors' middleware to fix cross-origin blocking [OK]

Common Mistakes:

• Thinking HTTP method change fixes CORS
• Confusing body parsing with CORS
• Believing HTTPS alone solves CORS

5. You want your Express API to allow only requests from https://example.com but block others. Which CORS configuration achieves this?

hard

A. app.use(cors());

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

C. app.use(cors({ origin: '*' }));

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

Solution

1. Step 1: Understand origin option in CORS

   The 'origin' option in the cors middleware specifies which website origins are allowed to access the API.

2. Step 2: Match requirement to configuration

   Setting origin to 'https://example.com' allows only that site; '*' allows all, no origin restricts, methods restrict HTTP verbs only.

3. Final Answer:

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

4. Quick Check:

   Restrict origin to example.com = C [OK]

Hint: Set origin to specific URL to restrict access [OK]

Common Mistakes:

• Using '*' allows all origins, not restricted
• Omitting origin allows all by default
• Confusing methods with origin restriction