HAproxy路径转发Angular应用时访问出现空白页问题

白屏由两个配置不匹配问题共同导致：

• HAproxy路径转发规则错误：front_encuestas后端块中，用于剥离/clinica/路径前缀的http-request set-path规则被注释。HAproxy会将携带/clinica/前缀的完整请求路径直接转发给后端Angular容器，而容器内的应用默认部署在服务根路径，无法匹配带前缀的路由与静态资源，直接返回404。
• Angular应用未适配子路径部署：ch-frontend-encuestas默认以根路径/为部署基准构建，生成的index.html中所有JS、CSS等静态资源的引用路径均从根路径开始。即使修正HAproxy路径重写，浏览器加载资源时仍会请求域名根路径，最终命中默认的ch-frontend后端，加载到无关的资源文件，导致Angular框架无法启动，页面渲染为空白。

绕过HAproxy直接访问容器时，请求不存在额外路径前缀，应用默认的根路径配置可正常匹配资源，因此不会出现白屏。打开浏览器开发者工具控制台，能看到大量静态资源404、或资源类型不匹配的报错，和上述问题表现一致。

按顺序完成以下两处配置调整即可恢复：

• 修正HAproxy配置
  首先在www-http前端块添加规则，将无尾斜杠的/clinica路径重定向到/clinica/，避免相对路径解析错误；同时放开front_encuestas后端块中被注释的路径重写规则。修改后的核心配置片段如下：

  frontend www-http
      bind *:80
      # 原有其他配置保持不变
      
      # 新增：补全子路径尾斜杠
      http-request redirect location /clinica/ if { path /clinica }
  
      use_backend api_laravel if { path_beg /main/ }
      use_backend front_encuestas if { path_beg /clinica/ }
      use_backend api_analitica if { path_beg /api-analitica/ }   
      default_backend checktime_front
  
  backend front_encuestas
      mode http
      # 放开路径重写规则，转发前剥离/clinica/前缀
      http-request set-path "%[path,regsub(^/clinica/,/,)]"
      server front_encuestas1 ch-frontend-encuestas:80 maxconn 32
  
  # 其余backend配置无需改动
  

  修改完成后执行HAproxy配置重载，使规则生效。
• 调整Angular应用构建参数
  针对子路径部署场景重新构建ch-frontend-encuestas应用，指定部署基准路径为/clinica/，保证应用内的资源引用、路由跳转都匹配HAproxy的转发规则：
  • 单次构建可直接在构建命令中添加参数：

    ng build --base-href /clinica/
    

  • 若需要固定配置，可修改项目根目录下angular.json文件，找到对应项目的构建配置项，将projects.[你的项目名].architect.build.options.baseHref的值改为/clinica/，后续正常执行构建即可。
    构建完成后更新部署的应用容器，强制刷新浏览器清除缓存后即可正常访问。

校验配置是否生效时，可打开浏览器开发者工具的网络面板，确认/clinica/路径下的所有静态资源请求均返回200状态码，且资源内容来自ch-frontend-encuestas应用即可。

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