React调用Node代理服务器报ERR_CONNECTION_REFUSED如何解决？

错误根因 #

你遇到的ERR_CONNECTION_REFUSED错误主要由以下3个问题导致：

• 未启动3001端口的express代理服务：你当前package.json的start脚本仅会启动React开发服务（默认运行在3000端口），代理服务没有运行，自然无法响应请求
• server.js存在代码错误：就算手动启动代理服务也会运行报错，无法正常处理请求
• App.js请求逻辑不合理：直接在组件顶层发起请求，会导致每次渲染都重复发起请求

具体修复步骤 #

1. 修复server.js代码 #

替换你的server.js为以下内容：

const express = require("express");
const app = express();
const cors = require("cors");
const axios = require("axios");
const port = 3001;

// 全局配置CORS，无需手动加响应头
app.use(cors());

app.get("/", async (req, res) => {
  try {
    // 此处替换为你自己的superheroapi apikey
    const response = await axios.get("https://superheroapi.com/api/你的真实apikey");
    // 返回接口真实响应数据
    res.send(response.data);
  } catch (err) {
    console.error("代理请求失败：", err);
    res.status(500).send("服务异常");
  }
});

app.listen(port, () => {
  console.log("express代理服务已启动，端口：" + port);
});

原有代码的错误点：

• 路由回调参数顺序错误：express路由回调第一个参数是请求对象req，第二个才是响应对象res，你只写了一个参数，实际拿到的是请求对象，调用header、send方法都会抛出异常
• 直接返回axios完整响应对象：axios返回的response包含状态码、响应头、配置等多余信息，需要返回response.data才是接口的真实数据
• 重复配置CORS：已经引入了cors中间件，不需要手动写Access-Control相关响应头

2. 配置启动脚本，支持同时启动双服务 #

先安装concurrently工具用于同时启动两个服务：

npm install -D concurrently

修改package.json中的scripts配置：

"scripts": {
  "start": "concurrently \"node server.js\" \"react-scripts start\"",
  "start:react": "react-scripts start",
  "start:server": "node server.js",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

配置完成后，执行npm start就会同时启动代理服务和React开发服务，不需要单独开两个终端。如果需要分别调试，也可以开两个终端分别执行npm run start:server和npm run start:react。

3. 优化App.js请求逻辑 #

将请求放到useEffect钩子中，仅在组件挂载时触发一次：

import './App.css';
import axios from 'axios';
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const getAPI =  {
      method: "GET",
      url: "http://localhost:3001/"
    }
    axios.request(getAPI)
    .then((response) => {
        console.log("请求成功，返回数据：", response);
    })
    .catch((error) => {
        console.error("请求失败：", error);
    });
  }, []);

  return (
    <>
      <h1>hello world</h1>
    </>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者Amadeo de la Peña