K8s中无需为后端配置Ingress 实现前端与内部服务连通

首先明确核心逻辑：React打包后是运行在用户浏览器的静态资源，不属于K8s集群内组件，因此无法直接访问集群内的ClusterIP（即你列出的10.107.95.144:5000）——该地址仅集群内Pod可路由，用户浏览器无法连通。
正确的实现方式是复用现有Nginx Ingress做路径转发，不需要单独给后端创建Ingress，也不需要修改后端Service的类型，所有流量统一走已暴露的前端入口。

步骤1：修正并更新现有Ingress配置 #

你原有的Ingress配置存在两处问题：一是host与http规则缩进错误，会导致路由不生效；二是全局rewrite规则会影响后端路径匹配，需要调整。修改后的完整配置如下：

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: nginx
  annotations:
    # 调整重写规则，截取路径前缀后的真实请求路径转发给后端
    nginx.ingress.kubernetes.io/rewrite-target: /$2
spec:
  ingressClassName: nginx
  defaultBackend:
    service:
      name: frontend
      port:
        number: 80
  rules:
    - host: myapp-hello.me
      http:
        paths:
        - path: /frontend(/|$)(.*)
          pathType: Prefix
          backend:
            service:
              name: frontend
              port:
                number: 80
        # 新增后端服务路由规则
        - path: /backend(/|$)(.*)
          pathType: Prefix
          backend:
            service:
              name: backend
              port:
                number: 5000

配置生效后，所有发往myapp-hello.me/backend/*的请求，都会被Ingress直接转发到集群内的backend Service，转发时会自动去掉/backend前缀，避免后端服务因路径不匹配返回404。

步骤2：修改React请求代码 #

直接使用同域名的相对路径即可，不需要配置跨域，也不需要暴露后端独立入口：

// 推荐使用相对路径，后续域名变更无需修改代码
fetch('/backend')
  .then(response => {
    response.text().then(text => {
      console.log(text);
      setData(text);
    })
  })

// 如需写绝对路径，格式为 http://myapp-hello.me/backend

注意事项 #

• 不要在前端代码中直接填写后端Service的ClusterIP、K8s内部域名（如backend.default.svc.cluster.local），这类地址仅集群内DNS可解析，用户浏览器无法访问。
• 本地开发环境联调时，可以在Vite/Webpack的devServer中配置代理转发/backend请求到后端地址，但该方案仅适用于开发阶段，生产环境打包后静态资源无代理能力，必须使用上述Ingress转发方案。

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