VueJS前端Nginx Ingress配置后访问/login出现404问题求助

1. 核对Ingress的Host配置 #

从你提供的Ingress描述来看，规则中的Host是timemanagement.raveleau.net，但你贴的Ingress配置文件里写的是example.com。这会导致只有访问timemanagement.raveleau.net时Ingress才会转发请求，如果你实际访问的是example.com/login，请求根本不会匹配到这个Ingress规则，直接返回404。先确认访问的域名和Ingress配置的host字段完全一致。

2. 开启正则路径匹配 #

你的Ingress使用了正则表达式路径/(.*)，但缺少关键注解nginx.ingress.kubernetes.io/use-regex: "true"，这会导致正则表达式不生效，路径匹配逻辑出错。修改Ingress的annotations部分：

metadata:
  annotations:
    # 原有注解保留，新增下面这行
    nginx.ingress.kubernetes.io/use-regex: "true"

3. 适配Vue的SPA路由模式 #

Vue应用如果使用history模式（默认是hash模式），直接访问子路由（如/login）时，后端需要将所有非静态资源的请求转发到index.html，否则会返回404。有两种处理方式：

方式一：通过Ingress注解添加Nginx规则 #

在Ingress的annotations中添加配置片段，让Ingress Controller生成的Nginx配置包含try_files逻辑：

metadata:
  annotations:
    # 其他注解保留，新增下面这行
    nginx.ingress.kubernetes.io/configuration-snippet: |
      try_files $uri $uri/ /index.html;

方式二：修改后端服务的Nginx配置 #

如果你的Vue应用是部署在Nginx容器中，需要确保容器内的Nginx配置文件包含以下规则（通常在/etc/nginx/conf.d/default.conf）：

location / {
  root /usr/share/nginx/html;
  try_files $uri $uri/ /index.html;
}

修改后重启后端Nginx容器。

4. 验证Ingress实际生效配置 #

进入Ingress Controller的Pod，查看生成的Nginx配置，确认规则是否正确应用：

# 替换成你的Ingress Controller Pod名称
kubectl exec -it nginx-ingress-controller-xxxx-xxxx -n ingress-nginx -- cat /etc/nginx/nginx.conf | grep -A 20 "timemanagement.raveleau.net"

检查是否包含对应的rewrite规则和try_files配置。

5. 测试后端服务直连 #

绕过Ingress，直接访问后端Service的ClusterIP，确认服务本身是否能正确响应/login请求：

# 在集群内的任意Pod中执行
curl http://10.244.3.98:80/login

如果直接访问也返回404，说明问题出在后端Vue应用的配置上，和Ingress无关。

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