Nginx-Ingress路由React应用刷新404问题求助

问题根源 #

React单页应用的路由是前端路由，页面跳转由JS在浏览器端处理，不会向服务器发起新请求；但刷新页面时，浏览器会直接向Ingress Controller请求当前URL对应的路径，若Ingress未配置匹配规则，就会返回404。

解决方案 #

提供两种可行的配置调整方式，任选其一即可：

方案一：调整Rewrite规则 #

通过Nginx Ingress的正则重写注解，将所有路径请求转发到React应用根路径，同时保留路由参数供前端路由识别：

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: host-ingress
  namespace: feeleat
  annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/use-regex: "true"
    nginx.ingress.kubernetes.io/rewrite-target: /$1
spec:
  rules:
  - host: admin.example.com
    http:
      paths:
      - pathType: ImplementationSpecific
        path: /?(.*)
        backend:
          service:
            name: example-service
            port:
              number: 80
  - host: api.example.ch
    http:
      paths:
      - pathType: Prefix
        path: "/"
        backend:
          service:
            name: example-1-service
            port:
              number: 80

• use-regex: "true"：开启路径正则匹配
• path: /?(.*)：匹配所有根路径及子路径
• rewrite-target: /$1：将请求重写到根路径并保留原始路径参数
• pathType: ImplementationSpecific：配合正则匹配使用，由Ingress Controller决定路径匹配逻辑

方案二：添加Nginx try_files配置 #

通过configuration-snippet注解直接注入Nginx规则，让不存在的路径自动返回React入口文件：

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: host-ingress
  namespace: feeleat
  annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/configuration-snippet: |
      try_files $uri $uri/ /index.html;
spec:
  rules:
  - host: admin.example.com
    http:
      paths:
      - pathType: Prefix
        path: "/"
        backend:
          service:
            name: example-service
            port:
              number: 80
  - host: api.example.ch
    http:
      paths:
      - pathType: Prefix
        path: "/"
        backend:
          service:
            name: example-1-service
            port:
              number: 80

• try_files $uri $uri/ /index.html：Nginx会先尝试匹配请求路径对应的文件，若不存在则返回index.html，交由React前端路由处理

操作步骤 #

1. 将上述修改后的配置保存为ingress.yaml
2. 执行命令更新Ingress配置：

kubectl apply -f ingress.yaml -n feeleat

3. 刷新React应用页面，验证是否正常加载

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