使用Nginx proxy_pass时Angular应用JS/CSS文件加载失败（404错误）

问题原因 #

你的Angular应用默认以**根路径（/）**作为资源加载的基准，当通过Nginx的/admin路径代理到4200端口时，浏览器会尝试从http://localhost:8080/main.js这类根路径请求资源，但Nginx的配置里只有/admin路径会转发到Angular，根路径的资源请求没有对应处理，所以返回404。

解决方案 #

方案一：修改Angular的资源基准路径 #

构建或运行Angular时，指定base-href为/admin/，让所有资源都以/admin为前缀：

• 生产构建：

ng build --base-href /admin/

• 开发环境运行：

ng serve --port 4200 --base-href /admin/

修改后，Angular生成的资源路径会变成/admin/main.js，Nginx收到请求后会匹配/admin的location规则，转发到4200端口，资源就能正常加载。

方案二：修改Nginx配置重写资源路径 #

如果不想改动Angular配置，可以在Nginx里新增规则，把根路径下的资源请求重写到/admin路径后转发：
修改后的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       8080 ;
        server_name  localhost;
        
        location  /admin {
           proxy_pass   http://localhost:4200/; 
        } 

        # 匹配Angular静态资源，重写路径后转发
        location ~* \.(js|css|svg|png|jpg|jpeg|gif|ico)$ {
            rewrite ^/(.*)$ /admin/$1 break;
            proxy_pass http://localhost:4200;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

这个配置会把所有JS、CSS、图片等资源请求，从/xxx.js重写成/admin/xxx.js，再转发到Angular的4200端口，解决资源404问题。

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