Fixing Static Resource CORS Issues with Nginx After API CORS Is Resolved

In a complex micro‑service project the author encountered a puzzling situation: the backend API had been configured to allow cross‑origin requests, yet requests for static assets such as fonts still failed with a CORS error like "No 'Access-Control-Allow-Origin' header is present".

The article first classifies CORS issues into two categories: data‑interface CORS (the API) and static‑resource CORS (images, videos, CSS, JS, fonts, etc.). It notes that while the API CORS was already fixed, the static resource service remained subject to the browser’s same‑origin policy.

After confirming that the request URL points to the static resource server, the author identifies the root cause: the static site does not send the required CORS header. The solution is to configure Nginx, which serves the static files, to add the header globally.

server {
    listen 80;
    add_header 'Access-Control-Allow-Origin' '*';
    server_name dev.aaa.com;
    root /yuxuntoo/static/uploadfile;
    index index.html;
}

The key line add_header 'Access-Control-Allow-Origin' '*'; instructs Nginx to include the wildcard origin header in every response from the static site, thereby eliminating the CORS blockage for all static resources.

With this single configuration change, the static‑resource CORS problem is resolved, demonstrating a quick and effective fix using Nginx.