Configuring allowed origins in Express - Visual Walkthrough

Concept Flow - Configuring allowed origins

Client sends request

↓

Server receives request

↓

Check Origin header

↓

Origin allowed

↓

Send response

↓

Client receives response

The server checks the request's origin header against allowed origins and either accepts or blocks the request accordingly.

Execution Sample

Express

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

const app = express();

const allowedOrigins = ['https://example.com', 'https://app.example.com'];

app.use(cors({
  origin: function(origin, callback) {
    if (!origin || allowedOrigins.indexOf(origin) !== -1) {
      callback(null, true);
    } else {
      callback(new Error('Not allowed by CORS'));
    }
  }
}));

This code configures an Express server to accept requests only from specified origins.

Execution Table

Step	Request Origin	Allowed Origins	Origin Allowed?	Action Taken
1	https://example.com	['https://example.com', 'https://app.example.com']	Yes	Request accepted, response sent
2	https://app.example.com	['https://example.com', 'https://app.example.com']	Yes	Request accepted, response sent
3	https://malicious.com	['https://example.com', 'https://app.example.com']	No	Request blocked, error sent
4	No Origin header	['https://example.com', 'https://app.example.com']	No	Request blocked, error sent

💡 Requests from origins not in the allowed list are blocked to protect the server.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4
request.origin	undefined	https://example.com	https://app.example.com	https://malicious.com	undefined
allowedOrigins	['https://example.com', 'https://app.example.com']	unchanged	unchanged	unchanged	unchanged
originAllowed	false	true	true	false	false

Key Moments - 2 Insights

Why does a request with no Origin header get blocked?

Because the server checks if the Origin header matches allowed origins. If missing, it cannot verify origin, so it blocks the request as shown in execution_table step 4.

What happens if the request origin is not exactly in the allowed list?

The request is blocked since the origin does not match any allowed origin exactly, as seen in execution_table step 3.

Visual Quiz - 3 Questions

Look at the execution table, what is the action taken when the request origin is 'https://app.example.com'?

A Request blocked, error sent

B Request accepted, response sent

C Request ignored

D Request redirected

💡 Hint

Check execution_table row 2 under 'Action Taken'

At which step does the originAllowed variable become false?

A After Step 1

B After Step 2

C After Step 3

D After Step 4

💡 Hint

Look at variable_tracker row for originAllowed at After Step 3

If we add 'https://malicious.com' to allowedOrigins, what changes in the execution table?

A Step 3 action changes to request accepted

B Step 4 action changes to request accepted

C No changes

D All steps blocked

💡 Hint

Adding to allowedOrigins affects originAllowed and action at step 3

Concept Snapshot

Configuring allowed origins in Express:
Use the cors middleware with an origin option.
Set origin to an array of allowed URLs.
Requests from these origins are accepted.
Others are blocked to protect your server.
No Origin header usually means block.

Full Transcript

This visual execution shows how Express with the cors middleware checks the origin of incoming requests. The server compares the request's Origin header to a list of allowed origins. If the origin matches, the request is accepted and the response is sent. If not, the request is blocked and an error is sent. Requests without an Origin header are also blocked for security. The variable originAllowed tracks if the origin is allowed. This helps prevent unauthorized cross-origin requests.