Azure AKS中React路由异常：本地正常但公网IP无法跳转页面

将Service与Ingress端口转发至本地时，所有功能运行正常；但通过Service或Nginx Ingress的公网IP访问时，前端页面可正常加载，却无法跳转到下一页，本地环境无此问题。

基础设施信息 #

• 托管K8s：Azure AKS
• 前端：Docker化React应用，由Nginx提供服务
• Ingress：Nginx Ingress Controller

Ingress配置 #

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: api-ingress
  namespace: default
  annotations:
    nginx.ingress.kubernetes.io/ssl-redirect: "false"
    nginx.ingress.kubernetes.io/use-regex: "true"
    nginx.ingress.kubernetes.io/rewrite-target: /$2
spec:
  ingressClassName: nginx
  rules:
    - host: ""
      http:
        paths:
          - path: /api(/|$)(.*)
            pathType: ImplementationSpecific
            backend:
              service:
                name: api-svc
                port:
                  number: 80
---
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: frontend-ingress
  namespace: default
  annotations:
    nginx.ingress.kubernetes.io/ssl-redirect: "false"
    nginx.ingress.kubernetes.io/use-regex: "true"
    # nginx.ingress.kubernetes.io/rewrite-target: /$1
    nginx.ingress.kubernetes.io/enable-modsecurity: "true"
    nginx.ingress.kubernetes.io/enable-owasp-modsecurity-crs: "true"
spec:
  ingressClassName: nginx
  rules:
    - host: ""
      http:
        paths:
          - path: /
            pathType: Prefix
            backend:
              service:
                name: frontend-app-svc
                port:
                  number: 80

已做排查 #

• AKS的NSG配置无问题
• 前端本地端口转发正常，但公网IP（Service及Ingress）无法实现路由跳转
• 后端Service在所有场景下均正常
• 尝试直接访问登录后的具体路径无效
• 尝试重新部署所有资源
• 多次调整Ingress规则

这个问题核心是React客户端路由与服务端（前端容器Nginx/Ingress）路由规则不匹配导致的：React路由在客户端跳转，但若直接访问子路径或跳转时，服务端无法识别这些路径，会返回404，进而导致跳转失败。

1. 修改前端容器内的Nginx配置 #

在前端Docker镜像的Nginx配置文件中，添加try_files规则，将所有请求转发到React的入口文件index.html，让React客户端路由接管处理：

server {
  listen 80;
  root /usr/share/nginx/html;
  index index.html;

  # 处理React客户端路由，所有未匹配到静态资源的请求都转发到index.html
  location / {
    try_files $uri $uri/ /index.html;
  }
}

修改后重新构建前端Docker镜像并部署。

2. 优化前端Ingress配置 #

前端Ingress无需复杂的正则配置，保持基础前缀路由即可。如果启用了ModSecurity，可先临时禁用测试，确认是否是规则拦截了路由请求：

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: frontend-ingress
  namespace: default
  annotations:
    nginx.ingress.kubernetes.io/ssl-redirect: "false"
    # 临时禁用ModSecurity测试
    nginx.ingress.kubernetes.io/enable-modsecurity: "false"
    nginx.ingress.kubernetes.io/enable-owasp-modsecurity-crs: "false"
spec:
  ingressClassName: nginx
  rules:
    - host: ""
      http:
        paths:
          - path: /
            pathType: Prefix
            backend:
              service:
                name: frontend-app-svc
                port:
                  number: 80

3. 验证步骤 #

• 部署修改后的前端镜像和Ingress配置
• 直接访问公网IP下的子路径（如http://<公网IP>/dashboard），确认能正常加载React页面
• 测试页面内的跳转功能，确认是否恢复正常

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