Resolving CORS Issues with Nginx Proxy: A Step‑by‑Step Configuration Guide

When a front‑end site (http://localhost:8080) accesses a back‑end service (http://localhost:59200), the browser performs a CORS preflight request and may block the call if the required response headers are missing.

The four essential CORS response headers are Access-Control-Allow-Origin, Access-Control-Allow-Headers, Access-Control-Allow-Methods, and Access-Control-Allow-Credentials. Each header controls which origins, custom headers, HTTP methods, and credential usage are permitted.

Typical error cases include missing Access-Control-Allow-Origin, a non‑200 status for the OPTIONS preflight, absent authorization in Access-Control-Allow-Headers, and unsupported HTTP methods such as PUT.

To solve these issues, the article walks through several Nginx configuration revisions. An initial simple proxy is defined:

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

When the first error (missing Access-Control-Allow-Origin) appears, the header is added with the always flag:

add_header Access-Control-Allow-Origin 'http://localhost:8080' always;

If the preflight still fails, an if ($request_method = 'OPTIONS') block returns a 204 status and adds the required headers:

if ($request_method = 'OPTIONS') {<br>    add_header Access-Control-Allow-Origin 'http://localhost:8080' always;<br>    add_header Access-Control-Allow-Headers 'authorization';<br>    return 204;<br>}

Further adjustments show that headers defined inside the if block override inheritance, so the Access-Control-Allow-Origin header must be repeated there. The article also demonstrates adding Access-Control-Allow-Methods for PUT requests and using * as a wildcard for headers and methods when appropriate.

Finally, two complete Nginx snippets are provided. The first uses separate if blocks for OPTIONS and non‑OPTIONS requests, while the second places the headers outside the conditional and only returns 204 for OPTIONS:

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

By applying the appropriate headers and ensuring the OPTIONS request returns a successful status, the CORS problems are resolved, and the front‑end can communicate with the back‑end without browser‑side blocks.