Nginx反向代理Angular Live Development Server加载缓慢问题求助

The Issue #

I’ve got an Angular 5 dev server running on http://localhost:7776 (via ng serve) behind Nginx 1.14.0 on Windows 10, with the proxy listening on http://localhost:7777. Directly hitting port 7776 loads instantly (under 1 second), but going through the proxy takes a full minute to load everything.

Here’s my current nginx.conf:

worker_processes 1;
events {
    worker_connections 1024;
}
http {
    include mime.types;
    default_type application/octet-stream;
    sendfile on;
    keepalive_timeout 65;
    server {
        listen 7777;
        server_name localhost;
        charset utf-8;
        location /sockjs-node {
            proxy_buffering off;
            proxy_pass http://localhost:7776/sockjs-node;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "Upgrade";
        }
        location / {
            proxy_buffering off;
            proxy_pass http://localhost:7776;
        }
    }
}

Chrome’s console shows requests hanging for extended periods before completing.

Why This Happens #

On Windows, the slowdown usually boils down to two main issues:

• Missing proxy headers that Angular’s dev server relies on to process requests properly
• Loopback DNS resolution delays when using localhost instead of 127.0.0.1 in Nginx config

Fixes to Try #

Let’s walk through the adjustments that should get your proxy loading as fast as direct access:

1. Add Required Proxy Headers #

Angular’s dev server expects certain headers to know the original request details. Update your root location / block with these:

location / {
    proxy_buffering off;
    proxy_pass http://localhost:7776;
    # Pass through host and client info
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    # Bypass cache for dev (prevents stale assets)
    proxy_cache_bypass $http_upgrade;
}

2. Use 127.0.0.1 Instead of localhost #

Windows sometimes has trouble resolving localhost quickly in proxy scenarios. Swap out localhost with 127.0.0.1 in both proxy_pass directives, and add the Host header to the sockjs-node location too:

location /sockjs-node {
    proxy_buffering off;
    proxy_pass http://127.0.0.1:7776/sockjs-node;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_set_header Host $host;
}

3. Tweak Nginx for Windows Performance #

Windows handles worker processes differently than Linux. Adjust these settings to match your system:

worker_processes 2; # Match your CPU core count (e.g., 4 for quad-core)
events {
    worker_connections 2048; # Increase from default for dev traffic
}
http {
    include mime.types;
    default_type application/octet-stream;
    sendfile on;
    keepalive_timeout 15; # Shorter timeout for dev
    keepalive_requests 100;
    # ... rest of your config
}

4. Update Angular Dev Server Command #

Make sure your Angular CLI (v1.7.0) allows connections from the proxy by binding to all interfaces:

ng serve --host 0.0.0.0 --port 7776

How to Test #

1. Save your modified nginx.conf
2. Restart Nginx: Open Command Prompt as admin, run nginx -s stop then nginx
3. Restart your Angular dev server with the updated command
4. Load http://localhost:7777 and check if the load time is back to normal

These changes should eliminate the delay by ensuring proper header propagation, fixing loopback resolution, and optimizing Nginx for your Windows environment.

内容的提问来源于stack exchange，提问作者Saorikido