Kubernetes 1.20.15版本Ingress配置rewrite-target后返回错误MIME类型的问题求助

我看了你的Ingress配置和问题描述，核心问题出在全局rewrite规则和路径匹配的冲突上，导致静态资源请求被错误转发到前端服务的根路径，返回的是HTML页面而非JS文件，所以Content-Type变成了text/html。

问题根源分析 #

你的Ingress配置里设置了全局的nginx.ingress.kubernetes.io/rewrite-target: /$2，但第一个路径规则是path: /(.*)——这个正则表达式只有1个捕获组（$1），而rewrite规则引用了$2，这会导致所有匹配这个路径的请求（包括JS、CSS等静态资源）都被重写到/，也就是前端服务的首页。当浏览器请求main-es2015...js时，实际拿到的是前端的index.html，自然Content-Type是text/html，触发了浏览器的MIME类型拦截。

另外，你的API路径转发也有隐性问题：请求/api/settings会被重写到/，而非预期的/settings，这可能会导致API服务收到错误的请求路径，只是目前你没发现这个问题而已。

解决方案 #

我们需要调整rewrite规则和路径匹配逻辑，确保静态资源和API请求都被正确转发：

方案1：修正正则匹配与rewrite规则

修改Ingress配置，调整全局rewrite-target为/$1，并调整路径顺序（让更长的路径先匹配）：

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  annotations:
    nginx.ingress.kubernetes.io/backend-protocol: HTTP
    nginx.ingress.kubernetes.io/enable-cors: "true"
    # 把rewrite-target改为$1，对应路径的捕获组
    nginx.ingress.kubernetes.io/rewrite-target: /$1
  labels:
    app.kubernetes.io/name: frontend-explorer
  name: frontend-explorer
spec:
  rules:
  - host: dev-explorer.test.org
    http:
      paths:
      # 先匹配API路径，nginx-ingress会自动按路径长度优先匹配
      - path: /api/(.*)
        pathType: ImplementationSpecific
        backend:
          service:
            name: backend-explorer-svc
            port:
              number: 3000
      # 再匹配其他所有路径，转发到前端服务
      - path: /(.*)
        pathType: ImplementationSpecific
        backend:
          service:
            name: frontend-explorer-svc
            port:
              number: 8081

这样修改后：

• 请求/api/settings会被重写到/settings，正确转发给API服务
• 请求/main-es2015...js会被重写到/main-es2015...js，前端服务返回正确的JS文件，Content-Type也会是application/javascript

方案2：使用前缀匹配（无需正则）

如果你的前端服务可以直接处理带前缀的路径，API服务也能处理/api/开头的路径，可以简化配置，去掉rewrite规则：

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  annotations:
    nginx.ingress.kubernetes.io/backend-protocol: HTTP
    nginx.ingress.kubernetes.io/enable-cors: "true"
  labels:
    app.kubernetes.io/name: frontend-explorer
  name: frontend-explorer
spec:
  rules:
  - host: dev-explorer.test.org
    http:
      paths:
      - path: /api/
        pathType: Prefix
        backend:
          service:
            name: backend-explorer-svc
            port:
              number: 3000
      - path: /
        pathType: Prefix
        backend:
          service:
            name: frontend-explorer-svc
            port:
              number: 8081

这个方案更简洁，但需要确保：

• API服务能处理/api/settings这样的路径（而非/settings）
• 前端服务的静态资源路径是相对路径，或者能正确处理根路径请求

验证步骤 #

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

   kubectl apply -f your-ingress-file.yaml
   

2. 等待Ingress控制器更新配置（通常几秒到几十秒）
3. 用curl验证静态资源的Content-Type：

   curl -I https://dev-explorer.test.org/main-es2015.3c58a0782b71050b1782.js
   

   正常情况下，返回头里应该有Content-Type: application/javascript
4. 验证API请求是否正常：

   curl https://dev-explorer.test.org/api/settings
   

   应该返回API服务的正确响应

额外排查点 #

如果修改Ingress后问题仍然存在，需要检查前端服务本身：

• 确认前端服务的web服务器（比如Nginx、Apache）是否正确配置了静态文件的MIME类型，确保.js文件对应的Content-Type是application/javascript
• 检查前端打包后的资源路径是否正确，是否存在路径引用错误导致请求到错误的资源

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