Nginx反向代理Angular应用时无法加载JS/CSS问题求助

我在两台服务器上部署了Angular Web应用的两个版本：生产版部署在exemple.com，开发版通过exemple.com/dev访问。配置反向代理后，开发版只能加载index.html文件，JS和CSS资源无法加载。通过开发者工具查看请求URL发现，index.html来自https://exemple.com/dev，但main.bundle.js的请求地址却是https://exemple.com/。

生产服务器nginx.conf配置：

server {
        listen       80 default_server;
        #listen       [::]:80 default_server;
        server_name  _;
        root         /site/app;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location /api/ {
                proxy_pass http://127.0.0.1:3000/api/;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
                add_header 'Access-Control-Allow-Origin' '*' always;
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
                add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept, authorization' always;
                add_header 'Access-Control-Allow-Credentials' 'true' always;
        }

        location /dev {
                proxy_pass http://10.10.38.18/;
                proxy_http_version 1.1;
                proxy_cache_bypass $http_upgrade;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
        }
}

开发服务器nginx.conf配置：

server {
        listen       80 default_server;
        #listen       [::]:80 default_server;
        server_name  _;
        root         /site/webApp;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
                autoindex on;
        }
        location /api/ {
                proxy_pass http://127.0.0.1:3000/api/;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
                add_header 'Access-Control-Allow-Origin' '*' always;
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
                add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept, authorization' always;
                add_header 'Access-Control-Allow-Credentials' 'true' always;
        }
}

1. 调整Angular项目的Base Href #

Angular默认以根路径/加载资源，导致开发版的JS/CSS请求直接指向主域名根路径。需要为开发版设置正确的base href：

• 构建开发版时添加参数：

ng build --base-href /dev/

• 或手动修改项目index.html的<base>标签：

<base href="/dev/">

2. 修改生产服务器的Nginx代理配置 #

当前/dev的location配置未正确处理路径前缀，需调整为：

location /dev/ {
        proxy_pass http://10.10.38.18/;
        proxy_http_version 1.1;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        # 重写请求路径，去掉/dev前缀后转发给开发服务器
        rewrite ^/dev/(.*)$ /$1 break;
}

注意：将location /dev改为location /dev/（末尾加斜杠），确保匹配所有/dev/开头的请求，再通过rewrite规则剥离前缀后转发。

额外说明 #

若不想修改Angular配置，仅靠Nginx也能解决问题，但调整base href是更符合Angular资源加载逻辑的规范做法。

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