Mastering CORS with Nginx: 5 Real-World Scenarios and Solutions

Preparation

Frontend address: http://localhost:8080. Backend address: http://localhost:59200. Ensure the backend does not handle CORS and verify the API works with Postman.

Understanding CORS Headers

The four main response headers are:

Access-Control-Allow-Origin – specifies allowed origin(s).

Access-Control-Allow-Headers – lists permitted custom request headers.

Access-Control-Allow-Methods – lists allowed HTTP methods.

Access-Control-Allow-Credentials – indicates whether cookies can be sent.

What Is a Preflight Request?

When a cross‑origin request requires verification, the browser first sends an OPTIONS request (preflight) to check the allowed origins, methods, and headers. Only after a positive response does it send the actual request.

Hands‑On Simulation

Configure Nginx to listen on port 22222 and proxy to the backend.

server {
    listen 22222;
    server_name localhost;
    location / {
        proxy_pass http://localhost:59200;
    }
}

Test the proxy by accessing http://localhost:22222 from the frontend.

Case 1

Access to XMLHttpRequest at 'http://localhost:22222/api/Login/TestGet' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

The preflight response lacks Access-Control-Allow-Origin. Add the header.

server {
    listen 22222;
    server_name localhost;
    location / {
        add_header Access-Control-Allow-Origin 'http://localhost:8080';
        proxy_pass http://localhost:59200;
    }
}

After adding the header the same error persisted because the header was not sent on non‑200 responses.

Case 2

Access to XMLHttpRequest … has been blocked by CORS policy: It does not have HTTP ok status.

The preflight OPTIONS request returned a status other than 200. Return 204 for OPTIONS.

server {
    listen 22222;
    server_name localhost;
    location / {
        add_header Access-Control-Allow-Origin 'http://localhost:8080' always;
        if ($request_method = 'OPTIONS') {
            return 204;
        }
        proxy_pass http://localhost:59200;
    }
}

Case 3

Access to XMLHttpRequest … has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.

The preflight response missed the authorization header. Add it inside the OPTIONS block.

server {
    listen 22222;
    server_name localhost;
    location / {
        add_header Access-Control-Allow-Origin 'http://localhost:8080' always;
        if ($request_method = 'OPTIONS') {
            add_header Access-Control-Allow-Headers 'authorization';
            return 204;
        }
        proxy_pass http://localhost:59200;
    }
}

Case 4

When the client uses PUT, the default allowed methods (GET, POST) are insufficient.

Access to XMLHttpRequest … has been blocked by CORS policy: Method PUT is not allowed by Access-Control-Allow-Methods in preflight response.

Add PUT to Access-Control-Allow-Methods inside the OPTIONS block.

server {
    listen 22222;
    server_name localhost;
    location / {
        if ($request_method = 'OPTIONS') {
            add_header Access-Control-Allow-Origin 'http://localhost:8080';
            add_header Access-Control-Allow-Headers 'content-type,authorization';
            add_header Access-Control-Allow-Methods 'PUT';
            return 204;
        }
        add_header Access-Control-Allow-Origin 'http://localhost:8080' always;
        proxy_pass http://localhost:59200;
    }
}

Case 5

If the backend already sets CORS headers, duplicate Access-Control-Allow-Origin values cause an error. Choose either backend handling or Nginx handling, but not both.

Complete Configuration Example

server {
    listen 22222;
    server_name localhost;
    location / {
        if ($request_method = 'OPTIONS') {
            add_header Access-Control-Allow-Origin 'http://localhost:8080';
            add_header Access-Control-Allow-Headers '*';
            add_header Access-Control-Allow-Methods '*';
            add_header Access-Control-Allow-Credentials 'true';
            return 204;
        }
        if ($request_method != 'OPTIONS') {
            add_header Access-Control-Allow-Origin 'http://localhost:8080' always;
            add_header Access-Control-Allow-Credentials 'true';
        }
        proxy_pass http://localhost:59200;
    }
}

With this configuration the common CORS issues are resolved, and the frontend at http://localhost:8080 can successfully call the backend through the Nginx proxy.