cors middleware setup in Express - Step-by-Step Execution

Concept Flow - cors middleware setup

Start Express App

↓

Import cors Middleware

↓

Configure cors Options

↓

Use cors Middleware in App

↓

Handle Incoming Requests

↓

cors Checks Request Origin

↓

Allow or Block Request

↓

Send Response

This flow shows how the Express app imports and uses the cors middleware to check and allow cross-origin requests before sending responses.

Execution Sample

Express

import express from 'express';
import cors from 'cors';

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

app.get('/', (req, res) => res.send('Hello'));
app.listen(3000);

This code sets up an Express server that uses cors middleware to allow requests only from https://example.com.

Execution Table

Step	Action	cors Middleware Behavior	Request Origin	Allowed?	Response Sent
1	Server starts and listens on port 3000	cors middleware ready	N/A	N/A	N/A
2	Incoming GET request to '/' from https://example.com	Checks origin header	https://example.com	Yes	Hello
3	Incoming GET request to '/' from https://notallowed.com	Checks origin header	https://notallowed.com	No	Blocked by CORS
4	Incoming GET request to '/' with no origin header (same origin)	No origin, allowed by default	None	Yes	Hello
5	Server continues listening for requests	cors middleware active	N/A	N/A	N/A

💡 Requests blocked if origin is not https://example.com; otherwise allowed and responded.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
app	Express instance	Express instance	Express instance	Express instance	Express instance
corsOptions.origin	'https://example.com'	'https://example.com'	'https://example.com'	'https://example.com'	'https://example.com'
request.origin	N/A	'https://example.com'	'https://notallowed.com'	None	N/A
request.allowed	N/A	true	false	true	N/A

Key Moments - 3 Insights

Why does the request from https://notallowed.com get blocked?

Because the cors middleware checks the origin against the allowed origin 'https://example.com' and blocks any origin not matching, as shown in execution_table row 3.

What happens if the request has no origin header?

Requests without an origin header are treated as same-origin and allowed by default, as shown in execution_table row 4.

Where in the code is the allowed origin set?

The allowed origin is set in the cors middleware options passed to app.use(cors({ origin: 'https://example.com' })), as tracked in variable_tracker under corsOptions.origin.

Visual Quiz - 3 Questions

Look at the execution table, what is the 'Allowed?' value at Step 3?

A N/A

B Yes

C No

D Depends on method

💡 Hint

Check the 'Allowed?' column in execution_table row 3 for the request from https://notallowed.com.

At which step does the cors middleware allow a request with no origin header?

A Step 4

B Step 3

C Step 2

D Step 5

💡 Hint

Look at execution_table row 4 where the origin is 'None' and 'Allowed?' is 'Yes'.

If we change the allowed origin to '*' in cors options, what changes in the execution table?

A No origins are allowed, so all requests blocked

B All origins are allowed, so Step 3 'Allowed?' becomes Yes

C Only requests from localhost are allowed

D No change, only https://example.com allowed

💡 Hint

Changing origin to '*' means all origins pass the check, affecting the 'Allowed?' column in execution_table.

Concept Snapshot

Express CORS Middleware Setup:
1. Import cors and express.
2. Create app with express().
3. Use app.use(cors({ origin: 'allowed-origin' })) to set allowed origins.
4. cors middleware checks incoming request origins.
5. Requests from allowed origins proceed; others blocked.
6. Helps secure cross-origin resource sharing easily.

Full Transcript

This visual execution trace shows how to set up CORS middleware in an Express app. The app imports the cors package and uses it with options specifying allowed origins. When requests come in, the middleware checks the origin header. If the origin matches the allowed origin, the request is allowed and the response is sent. If not, the request is blocked by CORS. Requests without an origin header are treated as same-origin and allowed. The execution table tracks each step, showing how requests from different origins are handled. The variable tracker follows key variables like the app instance, cors options, request origin, and whether the request is allowed. Key moments clarify common confusions about origin checking and default behaviors. The quiz tests understanding of how the middleware behaves at different steps and how changing options affects request allowance. This setup helps developers control which external sites can access their server resources safely.

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