CORS configuration in Nginx - Step-by-Step Execution

Process Flow - CORS configuration

Client sends request

↓

Nginx receives request

↓

Check if CORS headers needed

Yes↓

Add Access-Control-Allow-Origin header

↓

Add other CORS headers if needed

↓

Send response back to client

↓

Client accepts response if CORS headers valid

No↓

Send response without CORS headers

↓

Client blocks response due to missing CORS

This flow shows how nginx checks and adds CORS headers to responses so browsers allow cross-origin requests.

Execution Sample

Nginx

location /api/ {
  add_header Access-Control-Allow-Origin *;
  add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
  if ($request_method = 'OPTIONS') {
    add_header Access-Control-Allow-Headers 'DNT,User-Agent,Keep-Alive';
    return 204;
  }
}

This nginx config adds CORS headers to /api/ responses and handles OPTIONS preflight requests.

Process Table

Step	Request Method	Condition	Action	Response Headers	Response Code
1	GET	Is OPTIONS? No	Add Access-Control-Allow-Origin and Allow-Methods headers	Access-Control-Allow-Origin: *; Access-Control-Allow-Methods: GET, POST, OPTIONS	200
2	POST	Is OPTIONS? No	Add Access-Control-Allow-Origin and Allow-Methods headers	Access-Control-Allow-Origin: *; Access-Control-Allow-Methods: GET, POST, OPTIONS	200
3	OPTIONS	Is OPTIONS? Yes	Add Access-Control-Allow-Headers header and return 204	Access-Control-Allow-Origin: *; Access-Control-Allow-Methods: GET, POST, OPTIONS; Access-Control-Allow-Headers: DNT,User-Agent,Keep-Alive	204
4	PUT	Is OPTIONS? No	Add Access-Control-Allow-Origin and Allow-Methods headers	Access-Control-Allow-Origin: *; Access-Control-Allow-Methods: GET, POST, OPTIONS	200
5	DELETE	Is OPTIONS? No	Add Access-Control-Allow-Origin and Allow-Methods headers	Access-Control-Allow-Origin: *; Access-Control-Allow-Methods: GET, POST, OPTIONS	200
6	OPTIONS	Is OPTIONS? Yes	Add Access-Control-Allow-Headers header and return 204	Access-Control-Allow-Origin: *; Access-Control-Allow-Methods: GET, POST, OPTIONS; Access-Control-Allow-Headers: DNT,User-Agent,Keep-Alive	204
7	GET	Is OPTIONS? No	Add Access-Control-Allow-Origin and Allow-Methods headers	Access-Control-Allow-Origin: *; Access-Control-Allow-Methods: GET, POST, OPTIONS	200
Exit	-	-	No more requests	-	-

💡 No more requests to process, execution ends.

Status Tracker

Variable	Start	After 1	After 2	After 3	After 4	After 5	After 6	After 7	Final
$request_method	None	GET	POST	OPTIONS	PUT	DELETE	OPTIONS	GET	None
Response Headers	None	Allow-Origin, Allow-Methods	Allow-Origin, Allow-Methods	Allow-Origin, Allow-Methods, Allow-Headers	Allow-Origin, Allow-Methods	Allow-Origin, Allow-Methods	Allow-Origin, Allow-Methods, Allow-Headers	Allow-Origin, Allow-Methods	None
Response Code	None	200	200	204	200	200	204	200	None

Key Moments - 3 Insights

Why do OPTIONS requests return 204 instead of 200?

OPTIONS requests are preflight checks browsers send to verify permissions. Returning 204 means 'No Content' but with CORS headers, so the browser knows the actual request is allowed. See execution_table rows 3 and 6.

Why is Access-Control-Allow-Origin set to '*'?

Setting '*' means any website can access the resource. This is a simple way to allow all origins. See execution_table rows 1, 2, 4, 5, 7 where this header is added.

What happens if the request method is not listed in Allow-Methods?

The browser may block the request because the server did not explicitly allow that method. In this example, PUT and DELETE get the headers but are not listed in Allow-Methods, which can cause issues. See execution_table row 4 and 5.

Visual Quiz - 3 Questions

Look at the execution table, what response code does nginx return for an OPTIONS request?

A 404

B 204

C 200

D 500

💡 Hint

Check rows 3 and 6 in the execution_table under Response Code.

At which step does nginx add the Access-Control-Allow-Headers header?

A Step 3

B Step 1

C Step 4

D Step 7

💡 Hint

Look at the Response Headers column in execution_table rows for OPTIONS requests.

If we remove the 'if ($request_method = 'OPTIONS')' block, what will happen to OPTIONS requests?

A They will return 204 with headers

B They will be blocked by nginx

C They will return 200 without Access-Control-Allow-Headers

D They will return 404

💡 Hint

Refer to execution_table rows 3 and 6 and the role of the if block.

Concept Snapshot

Nginx CORS config:
Use add_header to set Access-Control-Allow-Origin and other headers.
Handle OPTIONS method separately to respond with 204 and proper headers.
'*' allows all origins.
Missing headers or wrong response code can block browser requests.
Always test with real browser requests.

Full Transcript

This visual execution shows how nginx handles CORS configuration. When a client sends a request, nginx checks if it needs to add CORS headers. For normal GET or POST requests, it adds Access-Control-Allow-Origin and Access-Control-Allow-Methods headers and returns 200. For OPTIONS requests, which are preflight checks by browsers, nginx adds Access-Control-Allow-Headers and returns 204 No Content. This tells the browser the actual request is allowed. The variable tracker shows how the request method and response headers change step by step. Key moments clarify why OPTIONS returns 204 and why the wildcard '*' is used. The quiz tests understanding of response codes and header application. This setup helps browsers allow cross-origin requests safely.