Using Nginx to Proxy Frontend Static Resources and Resolve Cross-Origin Issues

When a front‑end project is packaged, developers often wonder how the static assets access back‑end services, whether cross‑origin issues arise, and how to modify the deployed directory.

1. Clarify the Problem

During development we usually use proxy to forward requests from a local Node server to the back‑end api . After deployment the local Node proxy is unavailable, so we rely on the back‑end Nginx to handle proxying and cross‑origin concerns.

The production address may be an absolute URL like http://www.xxxx.com/api/aaa or a relative path such as /prod . Understanding Nginx’s role is essential.

2. What Is Nginx

Nginx is an open‑source, high‑performance web server and reverse‑proxy server with an event‑driven, asynchronous, non‑blocking architecture.

In development we often hear about forward proxy and reverse proxy . A reverse proxy hides the real server IP from the client, while a forward proxy hides the client’s identity from the server.

Reverse proxy: the client accesses the Nginx server’s address; the real backend IP is hidden.

Forward proxy: the server does not know the real client; Nginx acts as an intermediary.

3. Using Nginx in Front‑End to Solve Cross‑Origin

Cross‑origin occurs when JavaScript, Ajax, WebSocket, etc., request resources on a different domain, port, or protocol.

Nginx solves this by acting as a reverse proxy: the browser sends a request to Nginx (e.g., http://www.xxx.com:80 ), Nginx forwards it to the real back‑end server, eliminating cross‑origin issues.

server {
  listen 80;
  server_name yourdomain.com;

  location / {
    // serve all front‑end static files from the dist folder
    root /path/to/your/frontend;
    index index.html;
    try_files $uri $uri/ /index.html;
  }

  location /api/ {
    proxy_pass http://backend-server-address/api/; // real back‑end API address
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}

When the front‑end code uses a relative path like /api/users , Nginx forwards the request to the actual back‑end address. Most production builds use a relative /api path rather than an absolute URL.

Thus a request to yourdomain.com returns static assets, and a request to /api/xxx is proxied to http://yourdomain.com/api/xxx , enabling communication with the back‑end.

4. Front‑End Production Configuration

After building with a scaffolding tool such as Vue CLI, the command npm run build generates a package whose root path defaults to / . To change the base path, modify vue.config.js :

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/prod' : '/'
};

The built package will then reference static resources under /prod instead of the default root.

5. Summary

In production the front‑end consists of static files served via a relative path. Nginx listens for requests, returns static resources for / , and reverse‑proxies requests matching /prod (or /api ) to the real back‑end server, thereby completing the end‑to‑end communication.