Istio VirtualService URL重写后页面布局异常求助

页面布局损坏的核心原因是投票应用的静态资源路径未被正确路由：

• 你配置的rewrite: uri: "/"仅处理了/vote根路径的请求，但投票应用前端页面中的CSS、JS、图片等静态资源是用绝对路径（如/css/style.css）引用的。
• 当用户访问https://domain.tld/vote时，页面加载后会发起https://domain.tld/css/style.css这类请求，这些请求会被根路径的yelb-ui VirtualService匹配，导致静态资源加载失败，最终布局异常。

修改vote VirtualService，添加针对投票应用静态资源路径的匹配规则，确保所有以/vote/开头的静态资源请求都被转发到投票服务，并正确重写URI。同时调整规则顺序，让更具体的匹配规则优先执行：

apiVersion: networking.istio.io/v1beta1
kind: VirtualService
metadata:
  name: vote
spec:
  hosts:
    - "*"
  gateways:
    - yelb-gateway
  http:
  # 匹配投票应用的静态资源路径（css、js、images等）
  - match:
    - uri:
        prefix: /vote/css
    - uri:
        prefix: /vote/js
    - uri:
        prefix: /vote/images
    rewrite:
      # 去掉/vote前缀，将/vote/css/xxx重写为/css/xxx
      uri: "/{uri.substring(5)}"
    route:
    - destination:
        host: vote.vote2.svc.cluster.local
  # 匹配/vote根路径
  - match:
    - uri:
        prefix: /vote
    rewrite:
      uri: "/"
    route:
    - destination:
        host: vote.vote2.svc.cluster.local

同时，为避免yelb-ui的规则误匹配/vote相关请求，可给yelb-ui的VirtualService添加排除条件：

apiVersion: networking.istio.io/v1beta1
kind: VirtualService
metadata:
  name: yelb-ui
spec:
  hosts:
    - "*"
  gateways:
    - yelb-gateway
  http:
    - route:
        - destination:
            host: yelb-ui
            port:
              number: 80
      match:
        - uri:
            prefix: /
          # 排除所有以/vote开头的路径
          exclude:
            - uri:
                prefix: /vote

1. 应用修改后的配置：

kubectl apply -f vote-virtualservice.yaml
kubectl apply -f yelb-ui-virtualservice.yaml

2. 访问https://domain.tld/vote，检查页面静态资源加载状态与布局是否恢复正常。
3. 若仍有问题，查看Istio Ingress Gateway日志确认请求路由情况：

kubectl logs -n istio-system -l istio=ingressgateway | grep "vote"

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