React与Flask本地通信失败求助：已配置CORS仍无法调用接口

嘿，我之前也踩过几乎一模一样的坑，咱们从几个最容易忽略的点开始逐一排查：

• Flask监听地址配置错误（最常见的坑！）
  默认用flask run启动后端时，它只会监听127.0.0.1（本地回环地址），这个地址只有机器内部的进程能访问。但浏览器里的React应用是从客户端视角发起请求的，哪怕在同一台机器，浏览器也没法直接访问127.0.0.1:5000（如果是服务器部署场景，这个问题会更突出）。解决办法是启动Flask时指定监听所有网卡：

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

• 端口被占用或防火墙拦截
  先确认5000端口真的在正常工作：

  • Linux/macOS用命令：netstat -tulpn | grep 5000
  • Windows用命令：netstat -ano | findstr :5000
    接着直接在浏览器地址栏访问http://你的机器IP:5000/你的接口路径，如果打不开，大概率是系统防火墙挡住了5000端口的入站请求，去防火墙设置里添加允许5000端口的规则即可。

• CORS配置没覆盖全场景
  虽然你用了CORS(app)，但默认配置可能没法处理带自定义请求头、PUT/DELETE这类非简单请求的情况。可以先临时放宽配置做测试：

  from flask_cors import CORS
  CORS(app, resources={r"/*": {"origins": "*", "methods": ["GET", "POST", "PUT", "DELETE"], "allow_headers": "*"}})
  

  同时一定要看浏览器控制台的Network面板：请求是返回403（CORS权限错误）、404（接口路径写错）、500（后端代码报错），还是一直处于pending状态？这能帮你快速锁定问题方向。

• React的fetch地址写错了
  如果你在fetch里用了相对路径（比如fetch('/api/get-data')），那请求会发送到Nginx部署React的域名/IP，而不是Flask的5000端口。必须写绝对地址，比如fetch('http://你的机器IP:5000/api/get-data')。另外建议用环境变量管理接口地址，避免硬编码导致本地开发和服务器部署的地址冲突。

• Nginx配置的潜在冲突
  虽然你是让React直接请求Flask端口，但如果Nginx配置里有proxy_pass规则不小心覆盖了相关路径，或者启用了某些安全拦截策略，也可能干扰请求。可以先临时停止Nginx，用React的开发服务器（比如npm start）测试请求Flask，如果能成功，再回头检查Nginx的配置细节。

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