部署在入口控制器后面的 Angular 应用程序返回无效的 mime 类型

Question

我正在尝试在本地 minikube 集群中的入口控制器后面部署一个角度应用程序。我正在使用内置的 nginx 入口控制器。

当我尝试访问 Web Spa 服务的相应路径时，我在控制台中收到错误消息

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

但是，当我使用 kubectl 端口转发直接访问服务时，我可以正确访问应用程序

这些是我的部署、服务和入口资源

apiVersion: apps/v1
kind: Deployment
metadata:
  name: web-spa-deployment
spec:
  replicas: 1
  selector:
    matchLabels:
      app: web-spa
  template:
    metadata:
      labels:
        app: web-spa
    spec:
      containers:
      - name: web-spa
        image: phadkesharanmatrixcomsec/iva-workflow:web-spa-2.0
        imagePullPolicy: Always
        ports:
        - containerPort: 8080
        env:
        - name: ASPNETCORE_ENVIRONMENT
          value: "Production"
---
apiVersion: v1
kind: Service
metadata:
  name: web-spa-service
spec:
  selector:
    app: web-spa
  ports:
    - protocol: TCP
      port: 80
      targetPort: 80
  type: ClusterIP


apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: example-ingress
  annotations:
    nginx.ingress.kubernetes.io/enable-cors: "true"
    nginx.ingress.kubernetes.io/cors-allow-origin: "http://localhost:4200"
    nginx.ingress.kubernetes.io/cors-allow-methods: "PUT, GET, POST, DELETE, OPTIONS"
    nginx.ingress.kubernetes.io/cors-allow-headers: "Authorization, Content-Type"
    nginx.ingress.kubernetes.io/rewrite-target: /$2
spec:
  ingressClassName: nginx
  rules:
    - host: hostname.local
      http:
        paths:
          - path: /
            pathType: Prefix
            backend:
              service:
                name: web-spa-service
                port:
                  number: 80

这也是我构建 nginx 镜像的 dockerfile

# Stage 1: Build the Angular application
FROM node:18 AS build

# Set working directory
WORKDIR /app

# Copy package.json and package-lock.json
COPY src/WebSPA/package*.json ./

# Install dependencies
RUN npm install

# Copy the Angular application source code
COPY src/WebSPA ./

# Build the Angular application
RUN npm run build --prod

# Stage 2: Serve the Angular application
FROM nginx:alpine

# Copy built Angular application from the previous stage
COPY --from=build /app/dist/web-spa/browser /usr/share/nginx/html

# Expose port 80
EXPOSE 80

# Start Nginx
CMD ["nginx", "-g", "daemon off;"]

我已经尝试过不同的路径类型：Prefix / ImplementSpecific，并且还尝试禁用 CORS。 此外，我还可以使用相同的入口资源轻松部署后端 api 端点，我仅在前端遇到此问题 我再次能够通过端口转发访问相同的前端应用程序

kubectl port-forward svc/web-spa-service 8080:80

访问 hostname.local 也没有问题，因为我已经在 /etc/hosts 中创建了一个 dns 条目

请帮忙。

Answer 1

解决方案很简单，从 ingress yaml 文件中的注释中删除它

nginx.ingress.kubernetes.io/rewrite-target: /$1