Traefik IngressRoute重写目标后Angular服务无法匹配路由问题

问题根因 #

你遇到的问题由两个配置错误共同导致：

1. Traefik配置笔误：IngressRoute中引用Middleware的字段拼写错误，namepsace: home应为namespace: home，拼写错误会导致Traefik无法正确加载前缀移除规则。
2. Angular客户端路由未适配路径前缀：Traefik的stripPrefix规则仅作用于集群内部的请求转发，用户浏览器地址栏的URL仍然是http://urr4.me/web。Angular的客户端路由运行在浏览器侧，会读取地址栏URL尝试匹配/web路径，但你的Angular应用是按根路径/构建的，没有对应/web的路由规则，因此触发路由报错。

修复方案 #

1. 修正Traefik配置 #

将IngressRoute的Middleware引用部分的拼写修正：

middlewares:
  - name: prefix-stripper
    namespace: home

修改后重新应用YAML配置。

2. 适配Angular路径前缀 #

构建Angular应用时指定基础路径为/web/，执行构建命令时添加参数即可：

ng build --base-href /web/

该配置会在打包后的index.html中生成<base href="/web/">标签，告知Angular路由所有路径都基于/web前缀，路由匹配逻辑即可正常运行。

验证 #

重新打包Angular镜像并更新Deployment的镜像版本后，访问http://urr4.me/web即可得到和端口转发场景下访问http://localhost完全一致的效果。

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