React+Flask应用部署K8s后后端接口调用失败排查求助

问题概述 #

本地运行正常的React+Flask应用，部署到Kubernetes（Minikube）后网页能正常打开，但所有功能无法使用。浏览器网络请求显示，前端调用localhost:5000接口时返回(failed)net::ERR_CONNECTION_REFUSED错误。前端已执行React build生成静态文件，请求目标为localhost:5000/endpoint，问题核心出在URL/端口配置上。

核心原因 #

前端代码中硬编码的localhost:5000指向用户本地机器，但Flask后端实际运行在Kubernetes集群的Pod内部。浏览器中的前端应用无法直接访问集群内部的localhost地址，导致连接被拒绝。

解决步骤 #

1. 修改前端API请求地址 #

将前端的API请求地址从localhost:5000替换为Minikube节点IP加上Service的NodePort：

• 获取Minikube节点IP：

  minikube ip
  

• 修改前端apiUrl配置（示例）：

  // 替换为你的Minikube IP和NodePort（当前Service NodePort为31110）
  const apiUrl = "http://192.168.49.2:31110";
  

• 重新执行npm run build生成新静态文件，更新Docker镜像并重新部署到Kubernetes。

2. 调整后端CORS配置 #

避免跨域问题，更新Flask的CORS配置，允许前端新的访问地址：

// 替换为你的Minikube IP和NodePort对应的地址
CORS(app, supports_credentials=True, origins=["http://192.168.49.2:31110"])
// 开发环境可临时允许所有来源（生产环境不建议）：
// CORS(app, supports_credentials=True)

3. 验证Kubernetes资源状态 #

确认Service和Pod正常运行：

• 查看Service状态：

  kubectl get services
  

  确保todo-app-service的NODEPORT列显示31110，CLUSTER-IP正常分配。
• 查看Pod状态：

  kubectl get pods
  

  确保Pod处于Running状态，无重启或异常。
• 查看后端日志排查错误：

  kubectl logs <你的Pod名称>
  

可选优化：用Ingress优雅暴露服务 #

若不想使用NodePort，可配置Ingress通过域名访问：

1. 启用Minikube Ingress插件：

   minikube addons enable ingress
   

2. 创建ingress.yaml配置文件：

   apiVersion: networking.k8s.io/v1
   kind: Ingress
   metadata:
     name: todo-app-ingress
     annotations:
       nginx.ingress.kubernetes.io/rewrite-target: /$1
   spec:
     rules:
     - host: todo-app.local
       http:
         paths:
         - path: /
           pathType: Prefix
           backend:
             service:
               name: todo-app-service
               port:
                 number: 5000
   

3. 应用配置：

   kubectl apply -f ingress.yaml
   

4. 在本地/etc/hosts添加映射：

   <Minikube IP> todo-app.local
   

5. 前端apiUrl改为http://todo-app.local，重新build部署。

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