Kubernetes中React前端Pod无法与后端API服务通信求助

核心原因 #

React应用运行在用户浏览器中，浏览器处于Kubernetes集群外部，无法解析集群内部的Service域名（diagnosy-api）。而Pod内能正常curl是因为Pod处于集群网络中，CoreDNS可直接解析Service域名，两者网络环境完全不同。

解决方案 #

方案1：使用后端Service的外部访问地址

1. 获取后端Service的minikube访问URL：

   minikube service diagnosy-api -n diagnosy --url
   

   输出示例：http://192.168.49.2:30001（IP和端口随minikube环境变化）。

2. 修改ConfigMap，替换后端地址和端口：

   kubectl edit configmap diagnosy-configmap -n diagnosy
   

   修改后的数据部分：

   data:
       backend_host: 192.168.49.2
       backend_port: "30001"
       database_host: mongodb-service
       database_port: "27017"
   

3. 重启前端Deployment让配置生效：

   kubectl rollout restart deployment diagnosy-frontend -n diagnosy
   

方案2：用Ingress统一管理外部访问（更优雅）

通过域名路径区分前端和后端请求，无需暴露多个外部端口。

1. 启用minikube的Ingress插件：

   minikube addons enable ingress
   

2. 创建Ingress资源文件diagnosy-ingress.yaml：

   apiVersion: networking.k8s.io/v1
   kind: Ingress
   metadata:
     name: diagnosy-ingress
     namespace: diagnosy
     annotations:
       nginx.ingress.kubernetes.io/rewrite-target: /$1
   spec:
     rules:
     - host: diagnosy.local
       http:
         paths:
         - path: /(.*)
           pathType: Prefix
           backend:
             service:
               name: diagnosy-webapp
               port:
                 number: 3000
         - path: /api/(.*)
           pathType: Prefix
           backend:
             service:
               name: diagnosy-api
               port:
                 number: 3001
   

3. 应用Ingress配置：

   kubectl apply -f diagnosy-ingress.yaml
   

4. 获取minikube的IP：

   minikube ip
   

5. 修改本地hosts文件（Windows：C:\Windows\System32\drivers\etc\hosts；Linux/macOS：/etc/hosts），添加一行：

   <minikube-ip> diagnosy.local
   

6. 调整前端API请求路径为/api（例如将http://diagnosy-api:3001/xxx改为/api/xxx），浏览器请求会通过Ingress自动转发到后端Service。

方案3：检查React环境变量前缀（关键隐藏坑）

若前端基于Create React App构建，仅前缀为REACT_APP_的环境变量会被注入应用，当前变量名DIAGNOSY_API_HOST可能无法被读取。

1. 修改ConfigMap的变量名：

   kubectl edit configmap diagnosy-configmap -n diagnosy
   

   修改后的数据：

   data:
       REACT_APP_DIAGNOSY_API_HOST: diagnosy-api
       REACT_APP_DIAGNOSY_API_PORT: "3001"
       database_host: mongodb-service
       database_port: "27017"
   

2. 更新前端Deployment的env配置：

   kubectl edit deployment diagnosy-frontend -n diagnosy
   

   修改env部分为：

   env:
     - name: REACT_APP_DIAGNOSY_API_HOST
       valueFrom:
         configMapKeyRef:
           name: diagnosy-configmap
           key: REACT_APP_DIAGNOSY_API_HOST
     - name: REACT_APP_DIAGNOSY_API_PORT
       valueFrom:
         configMapKeyRef:
           name: diagnosy-configmap
           key: REACT_APP_DIAGNOSY_API_PORT
   

3. 重启前端Deployment，并确保前端代码使用新变量名：

   const apiUrl = `http://${process.env.REACT_APP_DIAGNOSY_API_HOST}:${process.env.REACT_APP_DIAGNOSY_API_PORT}`;
   

验证步骤 #

1. 打开浏览器开发者工具（F12），切换到Network标签，查看API请求的地址和状态码，确认是DNS解析失败还是连接超时。
2. 检查Service状态：

   kubectl get svc -n diagnosy
   

   确认diagnosy-api的EXTERNAL-IP状态（minikube中LoadBalancer类型Service可能显示<pending>，需用minikube service命令获取访问地址）。

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