Kubernetes Nginx Ingress启用TLS后Vue UI无法访问Dotnet后端API问题排查

核心问题根因 #

1. 前端运行位置认知偏差：Vue.js 构建的是客户端静态资源，加载到用户浏览器中执行，不属于K8S集群内部网络，无法解析集群内部Service域名api-svc。你配置的VUE_APP_BASE_URL = http://api-svc/api仅适用于集群内部的服务调用场景，不适用于浏览器发起的公网请求。
2. 浏览器混合内容安全限制：当用户通过HTTPS协议访问前端页面时，浏览器会自动拦截页面内发起的所有HTTP请求，并强制升级为HTTPS协议，这就是你观测到HTTP请求自动跳转HTTPS的原因，和集群内部的Istio、Ingress配置无关。

配置修正方案 #

你的整体实现思路是正确的，Istio做服务间mTLS的架构无需手动处理服务间TLS证书，只需要补充以下配置即可解决问题：

1. 调整前端API调用地址与Ingress规则

推荐使用路径转发方案，无需额外配置独立API域名，天然规避跨域问题：

• 重新构建前端镜像，将环境变量修改为VUE_APP_BASE_URL = /api
• 更新Ingress配置，新增/api前缀路径的转发规则，完整配置如下：

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: ui-ingress
  namespace: test
  annotations:
    kubernetes.io/ingress.class: "nginx"
    # 若不需要支持HTTP访问前端可删除以下注解，默认会强制跳转HTTPS
    nginx.ingress.kubernetes.io/force-ssl-redirect: "false"
spec:
  rules:
  - host: myapp.local
    http:
      paths:
      # 原有UI服务转发规则
      - pathType: ImplementationSpecific
        backend:
          service:
            name: ui-svc
            port: 8080
      # 新增API服务转发规则
      - path: /api
        pathType: Prefix
        backend:
          service:
            name: api-svc
            port: 8080
  tls:
  - hosts:
    - myapp.local
    secretName: tls-secret

2. Istio配置校验

你当前的Istio配置已经满足自动mTLS的要求，无需额外调整：

• 相关命名空间已开启sidecar自动注入
• Service端口已按Istio规范命名为http，可正确识别流量并自动加密
• 内部服务之间直接使用HTTP协议调用即可，Sidecar会自动完成mTLS加密传输，无需为内部服务配置TLS证书。

无手动TLS处理的最优方案 #

你当前选用Istio服务网格实现mTLS的方案已经是最优解：所有外部流量的TLS卸载统一在Ingress层完成，内部服务完全不需要感知TLS配置，传输加密全部由Sidecar自动处理，不需要额外开发或配置成本。使用路径转发方案后还可以去掉API服务的CORS配置，进一步降低安全风险。

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