如何配置NGINX实现/与/home路径的反向代理转发？

问题原因 #

Angular是单页应用（SPA），前端路由在浏览器端处理。当直接访问/home这类路由路径时，NGINX会将完整路径转发给UI服务，但UI服务的后端没有对应/home的资源，因此返回404；而从首页跳转的/home由前端路由接管，所以能正常工作。

配置修改方案 #

你可以选择以下两种方案解决问题：

方案1：统一处理所有UI路由（推荐，覆盖所有前端路由） #

修改原有的location /块，添加规则将非API路径的请求转发到UI服务根路径，确保所有前端路由都能被正确处理：

server {
      listen 80;
      server_name default_server;

      # 处理UI应用的所有路由，排除API路径避免冲突
      location / {
        if ($request_uri !~* ^/(registry/v1|entry/v1)) {
          rewrite ^/(.*)$ / break;
          proxy_pass http://my-ui-app;
        }
        proxy_pass http://my-ui-app;
      }

      location /registry/v1/ {
        proxy_pass http://registry-service;
      }

      location /entry/v1/ {
        proxy_pass http://entry-service;
      }

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

方案2：单独配置/home路径 #

如果仅需处理/home路径，可新增专门的location块，注意proxy_pass末尾加斜杠，确保请求转发到UI服务根路径：

server {
      listen 80;
      server_name default_server;

      location / {
        proxy_pass http://my-ui-app;
      }

      # 新增/home路径处理，末尾斜杠用于去除路径前缀
      location /home {
        proxy_pass http://my-ui-app/;
      }

      location /registry/v1/ {
        proxy_pass http://registry-service;
      }

      location /entry/v1/ {
        proxy_pass http://entry-service;
      }

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

关键说明 #

• 方案1更通用，能覆盖Angular所有新增的前端路由，避免后续出现同类404问题。
• proxy_pass末尾的斜杠是核心：加斜杠时，NGINX会去掉匹配的路径前缀后转发；不加斜杠则保留完整路径转发，这也是你之前配置/home未生效的原因。

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