使用Nginx反向代理时如何适配Angular应用的路由与资源路径

问题根源 #

你遇到的404报错和路由配置无关，核心是两个配置错误：

1. Angular默认打包的base href为/，所有静态资源（js、css、图片）会从站点根路径请求，你把应用挂载到/admin路径下时，浏览器会直接请求http://XX.XX.XXX.XX/main.XXXXXXXXX.js，而不是带/admin前缀的资源路径，自然匹配到8081端口的服务，返回404
2. 你的Nginx rewrite规则过于粗暴，会把所有/admin开头的请求都去掉前缀，包括静态资源请求，8085端口的服务无法正确响应资源请求

解决方案 #

1. 修改Angular base href配置

两种方案二选一即可：

• 生产环境打包时添加参数：ng build --base-href /admin/，注意前后的斜杠不能省略
• 直接修改src/index.html中的<base href="/">为<base href="/admin/">

如果是本地开发用ng serve调试，执行以下命令即可适配路径：

ng serve --serve-path /admin/ --base-href /admin/

修改后重新打包/启动应用，部署到8085端口对应的服务路径。

2. 调整Nginx反向代理配置

替换原有配置为以下内容，用proxy_pass末尾的斜杠实现前缀移除，比手动rewrite更稳妥，不会误处理静态资源路径：

server{
    listen 80;
    location / {
        proxy_pass http://127.0.0.1:8081;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
    location /admin {
        # 末尾斜杠是核心，会自动把请求路径里的/admin前缀移除后转发给8085服务
        proxy_pass http://127.0.0.1:8085/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

修改后重启Nginx生效。

3. 还原Angular路由配置

不需要手动给路由加/admin前缀，base href配置完成后Angular路由会自动拼接前缀，直接用原始路由配置即可：

const routes: Routes = [
  {path: '', redirectTo: 'users', pathMatch :'full'},
  { path: 'users', component: ListUsersComponent },
  { path: 'users/:id', component: UserDetailsComponent },
  {path: 'add', component: AddUserComponent}
];

验证 #

清空浏览器缓存后访问http://你的IP/admin即可正常加载应用。

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