AWS API Gateway从前端应用访问出现308过多重定向问题

针对你遇到的根URL正常、子路径触发308过多重定向的问题，整理了几个核心排查方向和解决方案：

1. 处理React SPA路由与Istio路径匹配冲突 #

React作为单页应用，访问子路径时（如/hello），Istio或应用本身可能会自动重定向到带尾斜杠的版本（/hello/），如果API Gateway的代理配置未适配这种路径变化，就会触发循环重定向。

• 调整Istio Virtual Service配置，同时匹配带斜杠和不带斜杠的路径，并统一重写为带尾斜杠的格式：

  apiVersion: networking.istio.io/v1alpha3
  kind: VirtualService
  metadata:
    name: react-app-vs
  spec:
    hosts: ["*"]
    gateways: ["react-app-gateway"]
    http:
    - match:
      - uri: { prefix: "/hello" }
      - uri: { prefix: "/hello/" }
      route:
      - destination:
          host: react-app-service
          port: { number: 80 }
      rewrite:
        uri: "/hello/"
  

• 在React路由配置中添加basename属性，确保路由根路径与API Gateway的代理路径一致，避免不必要的路径重定向。

2. 修正API Gateway的重定向处理逻辑 #

当Istio返回308重定向时，API Gateway可能会直接将HTTP协议的重定向地址返回给HTTPS客户端，导致客户端再次发起HTTPS请求，形成循环。

• 在API Gateway的集成请求设置中开启Follow redirects，让网关自动处理后端的重定向，并将最终响应返回给客户端，而非转发重定向指令。
• 若需要手动处理重定向头，可在API Gateway的集成响应映射模板中，将Location头里的http://替换为https://：

  #set($location = $input.params('Location'))
  #if($location.startsWith('http://'))
  #set($location = $location.replace('http://', 'https://'))
  #end
  {
    "Location": "$location"
  }
  

3. 修复React静态资源路径问题 #

React打包时若使用绝对路径加载静态资源（如/static/js/main.js），访问子路径时浏览器会请求https://hello.com/static/js/main.js，若API Gateway未正确代理该路径，会触发重定向到HTTP地址，进而引发循环。

• 在React项目的package.json中添加"homepage": "."，让静态资源使用相对路径加载，避免依赖根路径。
• 在API Gateway中新增静态资源代理规则，匹配/static/*路径，直接转发到React应用对应的静态资源目录。

4. 检查Istio Gateway的HTTPS重定向配置 #

如果Istio Gateway在内部VPN环境中配置了HTTP到HTTPS的重定向规则，会与API Gateway的HTTPS转发逻辑冲突，导致内部循环重定向。

• 移除Istio Gateway中的HTTPS重定向配置：

  apiVersion: networking.istio.io/v1alpha3
  kind: Gateway
  metadata:
    name: react-app-gateway
  spec:
    selector: { istio: ingressgateway }
    servers:
    - port:
        number: 80
        name: http
        protocol: HTTP
      hosts: ["*"]
      # 移除以下HTTPS重定向配置
      # tls:
      #   httpsRedirect: true
  

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