React前端应用跨VPC调用后端API超时，但前端VM内curl可正常访问的问题求助

我来帮你拆解下这个问题，这种“服务器端curl正常但前端浏览器调用失败”的情况，核心差异在于请求发起的环境完全不同，具体可以从这几个关键方向排查和解决：

核心问题：React应用的请求是从用户浏览器发起的，而非前端VM #

你在前端VM里用curl调用后端API时，请求是从前端VM所在的VPC内部发出的，通过已经配置好的VPC peering可以顺利到达后端的内部ALB，所以能拿到正常响应；但你的React应用是在用户本地的浏览器里运行的，请求是从用户的本地网络发出去的——而后端的内部ALB仅允许VPC内部或对等VPC的流量访问，用户本地网络根本无法直接连接到这个内部ALB，这才是导致连接超时的根本原因。

针对性解决方案 #

方案1：将后端ALB切换为公网ALB（适合API可对外暴露的场景） #

如果你的业务允许API对外公开，直接把后端的内部ALB改成公网ALB，配置好对应的公网访问权限和防火墙规则（允许公网流量访问ALB的80端口），然后在React应用里把API地址修改为公网ALB的域名或公网IP即可。

方案2：在前端VPC部署反向代理/API网关（适合API需要保持内部访问的场景） #

如果不想把API暴露到公网，可以在前端VPC里部署一个反向代理服务（比如Nginx），或者使用云服务商提供的API网关服务：

• 让代理服务接收前端浏览器的请求，然后将请求转发到后端VPC的内部ALB（因为前端VPC和后端VPC已经 peering，代理服务可以正常访问内部ALB）
• 之后在React应用里把API地址改成这个代理服务的公网访问地址，这样用户浏览器的请求会先到前端VPC的代理，再转发到后端，绕开本地网络无法访问内部ALB的问题。

方案3：核对React应用的API地址配置 #

确认你React应用里配置的API地址是不是后端内部ALB的私有IP/私有域名？如果是的话，用户的浏览器根本无法解析这些私有网络地址，自然会连接超时。你需要把API地址替换成前面两种方案里的公网ALB地址，或者前端VPC里代理服务的地址。

额外排查点 #

• 检查防火墙规则的方向：确保后端VPC的防火墙不仅允许前端VM的流量，还允许前端VPC里代理服务/公网ALB的流量访问内部ALB的80端口；同时确认后端VPC的出方向规则允许响应返回。
• 再次核对VPC peering的路由表：虽然前端VM能curl成功，但可以再确认两个VPC的路由表都正确添加了对方网段的路由条目，指向peering连接（避免出现部分路由遗漏的情况）。

备注：内容来源于stack exchange，提问作者Tinesh Kumar