React调用Flask API遇ECONNREFUSED错误，求修复方案

我在React应用中调用Flask的/data端点时，一直收到ECONNREFUSED错误。尝试配置了Nginx反向代理但仍无效，React页面无内容显示。

package.json配置 #

...
"proxy":"http://localhost:8080",
...

App.js代码 #

// Importing modules
import React, { useState, useEffect } from "react";
import "../App.css";

function App() {
    // usestate for setting a javascript
    // object for storing and using data
    const [data, setdata] = useState({
        name: "",
        age: 0,
        date: "",
        programming: "",
    });

    // Using useEffect for single rendering
    useEffect(() => {
        // Using fetch to fetch the api from
        // flask server it will be redirected to proxy
        fetch('/api/data', {method: 'GET',
        mode: 'cors',
        headers: {
        'Content-Type' : 'application/json'
        }}
).then((res) =>
            res.json().then((data) => {
                // Setting a data from api
                setdata({
                    name: data.Name,
                    age: data.Age,
                    date: data.Date,
                    programming: data.programming,
                });
            })
        )
    }, []);

    return (
        <div className="App">
            <header className="App-header">
                <h1>React and flask</h1>
                {/* Calling a data from setdata for showing */}
                <p>{data.name}</p>
                <p>{data.age}</p>
                <p>{data.date}</p>
                <p>{data.programming}</p>

            </header>
        </div>
    );
}

export default App;

Flask的server.py代码 #

# Import flask and datetime module for showing date and time
from flask import Flask
import datetime
  
x = datetime.datetime.now()
  
# Initializing flask app
app = Flask(__name__)
  
  
# Route for seeing a data
@app.route('/data')
def get_time():
  
    # Returning an api for showing in  reactjs
    return {
        'Name':"geek", 
        "Age":"22",
        "Date":x, 
        "programming":"python"
        }
  
      
# Running app
if __name__ == '__main__':
    app.run('0.0.0.0', debug=True)

Nginx的nginx.conf配置 #

worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {

        listen 8080;

        root /usr/local/etc/nginx/build/;

        index index.html;

        location / {
                try_files $uri /index.html;
        }
        location /api {
                client_max_body_size 10m;
                add_header 'Access-Control-Allow-Origin' http://localhost:5000;
                proxy_pass http://localhost:5000/;
        }
}
}

错误日志 #

• React终端输出：

  Proxy error: Could not proxy request /api/data from localhost:3000 to http://localhost:8080/. (ECONNREFUSED).
  

• Flask终端输出：

  127.0.0.1 - - [05/Nov/2022 21:39:24] "OPTIONS /data HTTP/1.0" 200 -
  

修复建议 #

1. 确认Nginx是否正常运行 #

ECONNREFUSED错误说明React的代理请求无法连接到localhost:8080，首先检查Nginx状态：

• 启动Nginx：执行nginx（macOS/Linux）或start nginx（Windows）
• 验证端口监听：执行lsof -i :8080（macOS/Linux）或netstat -ano | findstr :8080（Windows），确保有Nginx进程占用8080端口

2. 梳理代理逻辑，避免重复配置 #

当前React代理和Nginx代理存在逻辑冲突，可二选一简化配置：

方案A：使用Nginx作为唯一代理（生产环境推荐）

• 删除package.json中的"proxy":"http://localhost:8080"配置
• 执行npm run build生成React静态文件，将build目录移动到Nginx配置的root /usr/local/etc/nginx/build/路径下
• 重启Nginx，直接访问http://localhost:8080，React的/api/data请求会被Nginx转发到Flask

方案B：使用React代理（开发环境更便捷）

• 停止并移除Nginx相关配置
• 修改package.json的代理为Flask端口："proxy":"http://localhost:5000"
• 修改React中fetch的路径为/data（无需/api前缀）：

  fetch('/data', {
    method: 'GET',
    mode: 'cors',
    headers: { 'Content-Type': 'application/json' }
  })
  

• 重启React开发服务器，确保Flask在5000端口正常运行

3. 解决Flask的序列化与跨域问题 #

• 序列化问题：原Flask返回的Date是datetime对象，无法直接序列化为JSON，需转成字符串：

  "Date": x.strftime("%Y-%m-%d %H:%M:%S"),
  

• 跨域问题：安装flask-cors处理预检请求：
  1. 执行pip install flask-cors
  2. 修改server.py添加CORS支持：

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

4. 检查端口占用情况 #

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

• 执行lsof -i :5000（macOS/Linux）或netstat -ano | findstr :5000（Windows），确保Flask进程在监听该端口

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