AKS私有集群Flutter Web应用刷新及路径访问404问题求助

问题原因 #

Flutter Web是单页应用(SPA)，所有路由逻辑由前端框架在浏览器端处理。访问主域名时，请求会加载根路径的index.html，后续路由跳转都是前端行为；但手动访问/dashboard或刷新页面时，NGINX Ingress会直接向后端服务请求该路径的资源，而后端容器中不存在对应文件，因此返回404错误。

解决方案 #

修改Ingress配置，添加NGINX专属注解，配置重写规则，将所有请求转发到根路径的index.html，让前端路由接管所有路径的处理。

修改后的Ingress配置 #

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: frontend-ingress
  namespace: web-ns
  annotations:
    kubernetes.io/ingress.class: nginx
    # 启用SPA重写规则，将所有请求转发到/index.html
    nginx.ingress.kubernetes.io/rewrite-target: /
    nginx.ingress.kubernetes.io/use-regex: "true"
    nginx.ingress.kubernetes.io/configuration-snippet: |
      try_files $uri $uri/ /index.html;
spec:
  rules:
  - host: app.myorg.com
    http:
      paths:
      - path: /(.*)
        pathType: Prefix
        backend:
          service:
            name: frontend-srv
            port:
              number: 80

关键配置说明 #

• nginx.ingress.kubernetes.io/rewrite-target: /：将所有匹配的请求路径重写为根路径
• nginx.ingress.kubernetes.io/use-regex: "true"：允许路径使用正则表达式匹配
• nginx.ingress.kubernetes.io/configuration-snippet：添加NGINX的try_files指令，优先尝试访问请求路径的文件，不存在则转发到/index.html
• 路径修改为/(.*)：用正则匹配所有子路径

验证步骤 #

1. 应用修改后的Ingress配置：

   kubectl apply -f frontend-ingress.yaml -n web-ns
   

2. 等待Ingress配置生效后，手动访问https://app.myorg.com/dashboard或刷新页面，确认不再返回404错误。

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