Why CORS matters for APIs in Express - Visual Breakdown

Concept Flow - Why CORS matters for APIs

Browser sends API request

↓

Server receives request

↓

Server checks Origin header

↓

Origin allowed?

No→Reject request with CORS error

↓

Server sends response with CORS headers

↓

Browser accepts response if CORS headers valid

↓

API data accessible in browser

The browser sends a request with an origin. The server checks if the origin is allowed. If yes, it sends back CORS headers allowing access. Otherwise, the browser blocks the response.

Execution Sample

Express

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', 'https://example.com');
  next();
});

This code adds a header to allow requests only from https://example.com.

Execution Table

Step	Action	Request Origin	Server CORS Check	Response Header Sent	Browser Behavior
1	Browser sends API request	https://example.com	Check if origin allowed	Access-Control-Allow-Origin: https://example.com	Browser accepts response
2	Browser sends API request	https://malicious.com	Check if origin allowed	No CORS header or different origin	Browser blocks response (CORS error)
3	Browser sends API request	null (local file)	Check if origin allowed	Depends on server config	Browser blocks or accepts based on header
4	Request without Origin header (e.g. curl)	No Origin	No CORS check needed	No CORS header needed	Response received normally
5	End of flow	-	-	-	Browser enforces CORS policy based on headers

💡 Browser blocks API response if CORS headers do not allow the request origin.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
Request Origin	undefined	https://example.com	https://malicious.com	null	No Origin	varies per request
Server CORS Header	none	'https://example.com'	none or different	depends	none	varies per request
Browser Accepts Response	false	true	false	depends	true	depends on CORS headers

Key Moments - 3 Insights

Why does the browser block the response from https://malicious.com?

Because the server did not send an Access-Control-Allow-Origin header matching https://malicious.com, so the browser enforces CORS and blocks access (see execution_table step 2).

Why do requests without an Origin header (like curl) not get blocked?

CORS is a browser security feature. Requests without Origin header are usually from non-browser clients and are not blocked (see execution_table step 4).

What happens if the server allows all origins with '*'?

The server sends Access-Control-Allow-Origin: * header, so browsers accept responses from any origin, allowing cross-origin access.

Visual Quiz - 3 Questions

Look at the execution_table, what is the browser behavior when the request origin is https://example.com?

A Browser ignores the response

B Browser blocks the response due to CORS error

C Browser accepts the response

D Browser retries the request

💡 Hint

Check execution_table row 1 under 'Browser Behavior'

At which step does the browser block the response due to missing or wrong CORS headers?

A Step 2

B Step 3

C Step 1

D Step 4

💡 Hint

Look at execution_table row 2 for browser blocking

If the server sets Access-Control-Allow-Origin to '*', how would the browser behave for https://malicious.com origin?

A Browser blocks the response

B Browser accepts the response

C Browser sends a new request

D Browser ignores the origin

💡 Hint

Recall that '*' allows all origins, so browser accepts (see key_moments answer 3)

Concept Snapshot

Why CORS matters for APIs:
- Browsers enforce CORS to protect users from unauthorized cross-origin requests.
- Server must send Access-Control-Allow-Origin header matching the request origin.
- Without correct CORS headers, browser blocks API responses.
- Non-browser clients (curl) are not affected by CORS.
- Setting '*' allows any origin to access the API.

Full Transcript

When a browser sends a request to an API, it includes the origin of the page making the request. The server checks this origin and decides if it is allowed to access the API. If allowed, the server sends back a special header called Access-Control-Allow-Origin with the allowed origin. The browser then lets the page access the API response. If the origin is not allowed or the header is missing, the browser blocks the response to protect the user. This is called CORS, or Cross-Origin Resource Sharing. It is important because it stops malicious websites from reading data from APIs they shouldn't access. Non-browser tools like curl do not have this restriction. Developers must configure their API servers to send the right CORS headers to allow trusted websites to use their APIs safely.