Kind集群中Spring Cloud Gateway路由及React端口硬编码问题咨询

1. 使用相对路径发起API请求（最推荐） #

因为你的React应用和Spring Cloud Gateway部署在一起，前端页面的访问地址与Gateway对外地址完全一致，直接把React中的API请求路径改成相对路径就能彻底摆脱端口硬编码。

• 修改React代码中的请求URL，把原来的http://localhost:30080/api/bookmarks/**替换为/api/bookmarks/**。
• 用户浏览器发起请求时，会自动使用当前页面的域名+端口（比如访问Gateway的http://localhost:30080，前端请求就会变成http://localhost:30080/api/bookmarks/**），完全适配Gateway的对外端口，后续调整NodePort或改用Ingress都不用改前端代码。

2. 通过环境变量动态注入API配置 #

如果需要根据不同环境（本地/集群）调整API地址，可以在React构建或Gateway启动时注入环境变量：

构建时注入（Create React App 场景） #

• 在React代码中使用环境变量：

  const apiBaseUrl = process.env.REACT_APP_API_BASE_URL || '/api/bookmarks';
  // 发起请求时使用 `${apiBaseUrl}/xxx` 格式
  

• 构建时通过环境变量指定值：

  # 本地开发时指向本地API地址
  REACT_APP_API_BASE_URL=http://localhost:18080/api/bookmarks npm run build
  # 集群部署时用相对路径
  REACT_APP_API_BASE_URL=/api/bookmarks npm run build
  

容器启动时动态替换（适合Gateway动态调整场景） #

如果Gateway需要在启动时动态修改前端配置，可在容器启动脚本中用sed替换静态文件里的占位符：

• 在React的index.html中预留占位符：

  <script>
    window.API_BASE_URL = '__API_BASE_URL__';
  </script>
  

• 在Gateway的Dockerfile或启动脚本中添加替换逻辑：

  sed -i "s/__API_BASE_URL__/${API_BASE_URL:-\/api\/bookmarks}/" /path/to/react/static/index.html
  

• 部署Gateway时，通过环境变量API_BASE_URL传入对应值（集群部署时留空即可用默认相对路径）。

3. 配置Ingress统一对外入口（进阶方案） #

如果你的Kind集群支持Ingress，可以配置Ingress规则，把Gateway的服务暴露为一个自定义域名（比如gateway.local）：

• 在本地/etc/hosts中把gateway.local映射到Kind集群的节点IP。
• React中直接用http://gateway.local/api/bookmarks/**（或相对路径），不用关心端口。
• 这种方式彻底摆脱NodePort的端口依赖，更贴近生产环境配置。

关键注意点 #

前端代码运行在用户浏览器中，无法直接访问Kubernetes集群内部的Service域名（比如bookmarker-api-svc:8080）——浏览器请求从外部发起，无法解析集群内部DNS。只有Gateway的后端转发逻辑可以用集群内部Service地址，这也是Pod内curl正常但前端请求失败的核心原因。

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