Ingress与Service间修改URL路由？前端资源404问题求解

要解决这个问题，核心是通过Nginx Ingress的路径重写功能，将所有/custom开头的请求路径转换为image-service期望的根路径/，同时覆盖静态资源的路径映射需求。

调整Ingress配置 #

修改你的Ingress资源，添加路径重写注解并调整路径匹配规则：

metadata:
  name: ingress-srv
  annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/use-regex: "true"
    nginx.ingress.kubernetes.io/proxy-body-size: 20m
    # 路径重写核心注解：将匹配的子路径转发到服务端根路径
    nginx.ingress.kubernetes.io/rewrite-target: /$1
    # 超时配置保持不变
    nginx.org/proxy-connect-timeout: 3600s
    nginx.org/proxy-read-timeout: 3600s
    nginx.org/proxy-send-timeout: 3600s
spec:
  rules:
    - host: www.mysite.com  
      http:
        paths:
          # 匹配/custom及所有子路径，将/custom/xxx重写为/xxx
          - path: /custom(/.*)?
            pathType: Prefix
            backend:
              service:
                name: image-service
                port:
                  number: 80 
          - path: / 
            pathType: Prefix
            backend:
              service:
                name: frontend-service
                port:
                  number: 80

配置细节说明 #

• rewrite-target: /$1：将路径中/custom之后的捕获部分（正则组$1）替换为服务端的根路径。例如：
  • 请求/custom → 转发到image-service的/
  • 请求/custom/js/main.js → 转发到image-service的/js/main.js
  • 请求/custom/css/style.css → 转发到image-service的/css/style.css
• path: /custom(/.*)?：用正则匹配所有/custom开头的请求，确保静态资源、接口请求等子路径都能被正确重写。
• use-regex: "true"：必须开启正则匹配，才能让带捕获组的路径规则生效。

针对Angular（哈希路由）和React的适配说明 #

• Angular哈希定位策略下，URL的#后内容不会发送到服务端，路由跳转不受影响，但静态资源的请求路径仍依赖Ingress重写，上述配置已覆盖该场景。
• React应用的静态资源默认使用相对路径，请求时会基于当前URL的/custom路径，通过Ingress的重写规则，这些请求会被转换为服务端根路径下的对应资源，解决404问题。

生效与验证 #

应用修改后的配置：

kubectl apply -f your-ingress-file.yaml

测试验证：

• 访问www.mysite.com → 正常跳转至frontend-service
• 访问www.mysite.com/custom → 正常加载image-service主页
• 检查静态资源（如www.mysite.com/custom/js/main.js）是否返回200状态码

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