Ingress结合Angular多namespace场景如何不修改URL路由到正确namespace

首选方案：使用相对路径调用API #

你现有的Ingress配置已经满足同域名下/api前缀转发到对应namespace后端的规则，完全不需要给Angular配置固定的绝对路径backendUrl。
直接将Angular代码里的API调用地址从固定的绝对路径改为/api/xxx相对路径即可：

• 当用户访问test.mysite.com下的前端页面时，相对路径请求会自动发送到test.mysite.com/api/xxx，匹配test namespace的Ingress规则，转发到test环境的backend-service
• 当用户访问prod.mysite.com下的前端页面时，请求会自动发送到prod.mysite.com/api/xxx，匹配prod namespace的Ingress规则，转发到生产环境的backend-service

该方案无需修改任何K8s配置，也不需要调整Angular的构建逻辑，仅修改前端请求路径即可解决问题，兼容性最好，minikube和AWS环境都通用。

备选方案1：Angular运行时加载环境配置 #

如果你有必须使用绝对路径调用API的场景，不需要依赖Angular构建时环境变量，可以通过运行时拉取配置的方式实现同一份镜像适配多环境：

1. 在Angular应用初始化时（APP_INITIALIZER钩子）先请求/config.json获取后端地址配置
2. 给test和prod两个namespace的dashboard-service分别挂载对应的ConfigMap，ConfigMap里的config.json内容分别写入对应环境的API域名

示例test环境ConfigMap：

apiVersion: v1
kind: ConfigMap
metadata:
  name: frontend-config
  namespace: test
data:
  config.json: |
    {
      "backendUrl": "https://test.mysite.com/api"
    }

再将ConfigMap挂载到dashboard应用的静态资源目录下，即可实现同一份前端镜像在不同环境加载对应配置，无需多次构建。

备选方案2：Ingress根据Referer头转发（不推荐） #

如果完全不想修改前端代码，可以通过Nginx Ingress的annotation配置根据请求的Referer头判断来源环境，转发到对应namespace的服务，但该方案可靠性较低，浏览器可能禁用Referer头导致规则失效，仅作为兜底参考：
在公共的Ingress配置中添加如下规则，匹配Referer头中的域名转发到对应服务：

annotations:
  nginx.ingress.kubernetes.io/configuration-snippet: |
    if ($http_referer ~* test.mysite.com) {
      set $proxy_pass "http://backend-service.test.svc.cluster.local:3000";
    }
    if ($http_referer ~* prod.mysite.com) {
      set $proxy_pass "http://backend-service.prod.svc.cluster.local:3000";
    }
    proxy_pass $proxy_pass;

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