AWS环境下公网子网React前端无法访问私有子网Flask API求助

我来帮你梳理排查这个问题——你遇到的核心差异在于：前端EC2实例用curl访问API是VPC内部的服务器端请求，而React应用的请求是从用户浏览器发起的互联网请求，两者的网络环境完全不同，所以会出现能通和不能通的区别。下面分几个核心方向来解决：

一、先排查浏览器跨域限制（CORS）问题 #

如果浏览器开发者工具的Network面板里看到类似Access-Control-Allow-Origin相关的错误，那就是跨域限制导致的。因为React前端的域名/IP和API的地址不在同一源，浏览器会拦截请求。

解决方法：给Flask API配置CORS支持

1. 安装Flask-CORS扩展：

pip install flask-cors

2. 在Flask应用代码中初始化并配置允许你的前端域名：

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
# 替换成你的前端公网IP或自定义域名，比如"http://your-frontend-public-ip"
CORS(app, resources={r"/*": {"origins": "http://your-frontend-domain.com"}})

# 你的API路由示例
@app.route('/api/data')
def get_data():
    return {"message": "Hello from private subnet API"}

• 测试阶段可以临时设置origins="*"允许所有来源，但生产环境一定要限制为你的前端域名，避免安全风险。

二、修复AWS网络架构的核心问题（关键！） #

你提到API在私有子网，这意味着它没有公网IP，也不能直接接收互联网的请求——而React的请求是从用户浏览器（互联网）发出来的，根本无法直接到达私有子网的API。这才是最可能的根本原因，而前端EC2能curl通只是因为VPC内部的网络连通性。

正确的架构应该是给API添加一个应用负载均衡（ALB）：

1. 创建ALB并将其部署在公网子网，配置HTTP/HTTPS监听（端口80/443）
2. 配置ALB的目标组，将私有子网里的Flask API实例（比如端口5000）加入目标组
3. 调整安全组规则：
   • ALB的安全组：允许来自互联网的HTTP/HTTPS流量（0.0.0.0/0，端口80/443）
   • API实例的安全组：允许来自ALB安全组的流量（端口5000，Flask默认端口）
4. 确保VPC路由表配置正确：
   • 公网子网的路由表指向互联网网关（IGW），让ALB能接收互联网请求
   • 私有子网的路由表能和ALB所在的公网子网连通（默认VPC配置一般已经满足，除非你自定义了路由）

三、修正React应用的API地址配置 #

React代码里不能直接写API的私有IP或内网域名，必须指向ALB的公网DNS地址或你绑定的自定义域名。

1. 在React项目的.env文件中配置API地址：

REACT_APP_API_URL=http://your-alb-public-dns.amazonaws.com

2. 在React组件中使用这个环境变量发起请求：

fetch(`${process.env.REACT_APP_API_URL}/api/data`)
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error("API请求失败：", err));

快速排查步骤 #

1. 打开浏览器开发者工具（F12），切换到Network标签，发起请求后查看：
   • 如果是CORS error：优先处理Flask的CORS配置
   • 如果是ERR_CONNECTION_REFUSED或ERR_TIMED_OUT：说明API没有公网入口，必须配置ALB
2. 测试ALB的公网地址：直接在浏览器里访问http://your-alb-public-dns.amazonaws.com/api/data，看是否能返回正常响应

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