React应用浏览器端无法访问ECS上的FastAPI后端API求助

浏览器运行在用户本地环境，完全无法解析ECS私有子网内的Service Discovery域名——这个域名是VPC内部专属的，只有VPC里的资源能通过内部DNS识别，外部环境（包括用户本地的浏览器）根本查不到对应的IP，自然会抛出net::ERR_NAME_NOT_RESOLVED错误。而前端容器能curl成功，是因为它本身就在VPC里，能正常走内部DNS解析。

方案1：用ALB转发后端API请求 #

• 给后端ECS服务也配一个ALB（或者复用前端的ALB，靠路径区分），把/api/*这类后端API路径转发到后端ECS的目标组
• 前端代码里把API请求地址改成前端ALB的公网域名+API路径，比如http://your-frontend-alb.com/api/sample-api
• 配置ALB的监听规则：当请求路径匹配/api/*时，转发到后端ECS服务的目标组
• 记得调整安全组：后端ECS的安全组要允许ALB所在的安全组访问后端端口

方案2：在前端容器里加反向代理 #

• 在React项目里用setupProxy.js配置代理，把前端发起的/api/*请求转发到后端的服务发现地址：

  const { createProxyMiddleware } = require('http-proxy-middleware');
  
  module.exports = function(app) {
    app.use(
      '/api',
      createProxyMiddleware({
        target: 'http://backend-servicediscovery.namespace',
        changeOrigin: true,
      })
    );
  };
  

• 前端代码里发起API请求时，直接用相对路径/api/sample-api就行——请求先到前端容器的代理，再由代理转发到后端（代理在VPC里，能正常解析服务发现域名）
• 安全组要开权限：前端容器的安全组允许自身访问后端端口，后端安全组允许前端安全组访问

方案3：VPC端点/公网解析（不推荐） #

• 如果硬要让外部直接解析服务发现域名，可以用Route53私有域名关联VPC，但这要求用户设备得在VPC的VPN或专线环境下才能访问，普通公网用户用不了，所以不建议这么做

别想着让浏览器直接请求VPC内部的服务发现域名，从网络架构上就不成立——浏览器不在VPC的信任域里，根本碰不到内部DNS。另外，不管用哪种方案，都要把后端的CORS配置好，允许前端ALB的域名访问，免得解决了域名问题又踩CORS的坑。

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