Flask与React跨域代理报错(ECONNREFUSED)求助

核心排查与解决步骤 #

错误提示说明React的代理请求无法连接到Flask服务，按以下步骤逐一处理：

1. 验证Flask服务是否正常运行 #

• 启动Flask后，终端必须显示类似 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit) 的日志
• 直接在浏览器访问 http://localhost:5000/members，如果能看到 {"members":["m1","m2","m3"]}，说明服务正常；若访问失败，先解决Flask启动问题

2. 修改Flask绑定地址 #

默认Flask仅绑定127.0.0.1，可能导致代理连接异常，修改server.py的启动代码：

if __name__=="__main__":
    app.run(debug=True, host='0.0.0.0', port=5000)

绑定0.0.0.0允许所有网络接口访问，避免localhost解析问题

3. 确保React代理配置正确且生效 #

• 检查package.json的proxy配置是否在顶层，格式如下：

  {
    "name": "your-react-app",
    "version": "0.1.0",
    "proxy": "http://localhost:5000",
    // 其他配置...
  }
  

• 修改proxy后必须重启React开发服务器，否则配置不会生效

4. 绕过代理直接请求（应急方案） #

如果代理问题仍无法解决，可直接在React中请求完整URL，同时给Flask添加跨域支持：

步骤1：给Flask安装并配置CORS

pip install flask-cors

修改server.py：

from flask import Flask
from flask_cors import CORS

app=Flask(__name__)
CORS(app)  # 允许所有跨域请求

@app.route("/members")
def members():
    return{"members":["m1","m2","m3"]}

if __name__=="__main__":
    app.run(debug=True, host='0.0.0.0', port=5000)

步骤2：修改React的fetch请求

useEffect(()=>{
    fetch("http://localhost:5000/members").then(
        res=>res.json()
    ).then(
        data=>{
            setData(data)
            console.log(data)
        }
    )
},[])

5. 检查端口占用情况 #

确认5000端口未被其他程序占用：

• Windows终端执行：netstat -ano | findstr :5000
• 如果有其他进程占用，杀掉该进程或修改Flask的端口（比如改成5001）

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