React应用代理Express服务器时出现ECONNREFUSED错误求助

问题详情 #

在React应用中配置代理连接Express后端时，出现以下错误：

[HPM] Error occurred while proxying request localhost:3000/api to http://localhost:3001/ [ECONNREFUSED]

相关代码文件：

proxysetup.js #

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:3001/',
      changeOrigin: true,
    })
  );
};

App.js #

import React from "react";

import "./App.css";
function App() {
  const [data, setData] = React.useState(null);
  React.useEffect(() => {
    fetch("/api")
      .then((res) => res.json())
      .then((data) => setData(data.message));
  }, []);
  return (
    <div className="App">
      <header className="App-header">
        <p>{!data ? "Loading..." : data}</p>
      </header>
    </div>
  );
}
export default App;

server.js #

const express = require("express");
const PORT = process.env.PORT || 3001;
const app = express();
app.get("/api", (req, res) => {
  res.json({ message: "Hello from express!" });
});
app.listen(PORT, () => {
  console.log(`Server listening on ${PORT}`);
});

文件目录结构：

解决步骤 #

1. 确保Express服务器已启动 #

• 先执行node server.js启动后端，确认控制台输出Server listening on 3001
• 必须同时运行React开发服务（npm start）和Express后端服务，缺一不可

2. 检查端口占用情况 #

• 验证3001端口是否被其他进程占用：
  • Windows：netstat -ano | findstr :3001
  • macOS/Linux：lsof -i :3001
• 若端口被占用，要么终止对应进程，要么修改server.js的PORT值（比如改为3002），同时同步更新代理配置文件中的target地址

3. 修正代理配置文件名 #

Create React App要求代理配置文件必须命名为setupProxy.js（而非proxysetup.js），如果文件名错误，React不会加载代理规则，这是最常见的问题之一。重命名文件后重启React服务。

4. 优化代理配置 #

将代理配置文件中的target末尾斜杠移除，避免路径匹配异常：

target: 'http://localhost:3001'

5. 验证后端接口可用性 #

在浏览器或API测试工具中直接访问http://localhost:3001/api，如果能返回{"message": "Hello from express!"}，说明后端服务正常，问题集中在代理配置或React服务的重启环节。

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