K8s集群内React前端向Flask后端发API请求失效如何解决？

安全阿岳

2026-11-1

问题核心判定

你遇到的请求不通，和K8s集群内部的网络配置、Service连通性完全无关：

你在前端Pod内curl后端Service地址能拿到正常响应，说明从前端Pod到后端Service的集群内路由、DNS解析、后端接口的服务能力都是正常的。
问题的本质是：打包后的React静态资源，是下载到用户本地浏览器中执行的，而非在K8s集群的Pod运行时内执行。你配置的three-tier-backend-svc.default.svc.cluster.local 是K8s集群内部的专用DNS域名，只有集群内的Pod、节点能解析和路由，用户本地的浏览器既没法解析这个域名，也没有网络路由能到达这个仅在集群内部开放的5000端口，请求自然会失败。

可落地的实现方案

方案1：Ingress统一路由（生产环境首选）

这种方案不需要额外暴露多个对外端口，还能避免跨域、混合内容拦截问题，是最常用的架构模式：

修改前端axios配置，将baseURL改为相对路径，不再写死集群内部地址：
```
export default axios.create({
  baseURL: "/api/",
  headers: {
    "Content-type": "application/json"
  }
});
```
此时浏览器发起的API请求会自动复用前端页面的访问域名，比如前端页面从http://app.example.com 访问，请求就会发到http://app.example.com/api/add
在集群的Ingress规则中配置路径转发：
- 匹配/api前缀的请求，转发到Flask后端的Service，同时配置路径重写，移除/api前缀，让请求路径和Flask的/add 接口路由匹配
- 其余非/api的路径，全部转发到React前端的Service
所有内部服务间的通信都在集群网络内完成，浏览器只需要和Ingress入口通信即可，链路完全打通。

如果不需要统一入口，可以单独将Flask后端服务开放到用户可访问的网络环境：

可以将后端Service配置为NodePort类型，把后端5000端口映射到集群节点的固定高位端口；也可以为后端配置独立的Ingress访问域名，比如http://api.app.example.com
修改前端axios的baseURL为这个对外可访问的后端地址即可
注意如果前端页面是HTTPS部署的，后端的对外访问地址也必须配置HTTPS，否则会被浏览器的混合内容安全规则拦截，无法发起请求。

如果是在本地开发调试React代码，不需要部署到集群环境，可以在前端的构建工具（Vite/Webpack）中配置devServer代理规则，将本地开发服务器下的/api 请求直接转发到做了端口暴露的集群后端地址，无需修改业务代码就能实现本地开发时的接口连通。

避坑提醒：绝对不要将集群内部的Service域名、ClusterIP地址硬编码到前端打包产物中，这类地址仅对集群内部网络可见，终端用户的浏览器无法访问，硬编码必然出现浏览器侧请求失败的问题。

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