React+Flask本地测试遇403(Forbidden)错误，寻求解决方案

问题背景 #

• 本地测试React+Flask应用正常，生产环境部署在EC2服务器上
• 初始浏览器报CORS错误，用Chrome插件临时禁用CORS后，出现403 Forbidden错误
• React通过.env文件管理开发/生产环境的API URL，Flask依赖已通过venv正确安装
• 本地测试时，axios.get()直接填写localhost地址能正常获取Flask路由返回的JSON数据，替换为EC2地址后报错

排查与解决步骤 #

1. 检查EC2安全组配置 #

• 确认EC2实例的安全组已开放Flask应用监听的端口（默认5000，若自定义端口需对应调整），入站规则允许你的测试IP或指定IP段访问该端口（生产环境避免开放所有IP）
• 同时检查EC2所在子网的网络ACL，确保允许该端口的入站、出站流量

2. 修正Flask服务的绑定地址 #

• 本地flask run默认仅允许localhost访问，部署到EC2必须绑定0.0.0.0才能让外部访问：

  flask run --host=0.0.0.0 --port=5000
  

• 若使用gunicorn等生产级服务器，启动命令也要指定绑定0.0.0.0：

  gunicorn --bind 0.0.0.0:5000 app:app
  

3. 验证EC2上Flask服务的可用性 #

• 在EC2实例内部执行curl http://localhost:5000/你的路由，确认服务能正常返回JSON数据
• 从本地机器执行curl http://EC2公网IP:5000/你的路由，若也返回403，说明问题出在Flask或EC2网络配置；若正常，则问题可能在React端的请求配置

4. 正式解决CORS问题（弃用插件） #

• 插件临时禁用CORS仅适合本地调试，生产环境需在Flask端配置CORS：
  1. 安装依赖：

     pip install flask-cors
     

  2. 在app.py中添加配置：

     from flask import Flask
     from flask_cors import CORS, cross_origin
     
     app = Flask(__name__)
     # 允许指定域名访问（生产环境建议替换为你的React域名/IP）
     CORS(app, resources={r"/*": {"origins": ["http://你的React地址"]}})
     
     # 或针对单个路由配置
     @app.route('/api/data')
     @cross_origin(origins="http://你的React地址")
     def get_data():
         return {"message": "success"}
     

5. 确认React端环境变量配置 #

• 检查.env文件中的生产环境API URL是否正确，格式应为REACT_APP_API_URL=http://EC2公网IP:5000（注意前缀REACT_APP_是React识别环境变量的要求）
• 在浏览器控制台输入process.env.REACT_APP_API_URL，确认实际注入的地址正确

6. 排查EC2系统层面的防火墙/SELinux #

• 若EC2使用Amazon Linux/CentOS，检查SELinux状态：

  getenforce
  

  若显示Enforcing，可临时关闭测试：

  setenforce 0
  

  若问题解决，需通过setsebool命令配置SELinux允许HTTP访问对应端口
• 检查firewalld防火墙是否开放端口：

  sudo firewall-cmd --list-ports
  sudo firewall-cmd --add-port=5000/tcp --permanent
  sudo firewall-cmd --reload
  

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