Node.js+React请求500错误及代理连接失败问题求助

我是Node.js新手，在实现React应用与Node.js后端协同工作时遇到困难。API单独运行（执行node server.js）可正常读取数据库内容，但通过React应用发起请求时，localhost始终返回错误。

应用逻辑很简单：点击按钮后，查询结果应显示在控制台。请求URL为：
http://localhost:3000/test

终端提示错误：

Proxy error: Could not proxy request /test from localhost:3000 to http://localhost:3000.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

API代码 #

const mysql = require('mysql2');
const express = require('express');
const cors = require('cors');

const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'Elsalvador60?',
  database: 'reactapp'
});

connection.connect((err) => {
  if (err) {
    console.error('Error connecting to database: ' + err.stack);
    return;
  }
  console.log('Connected to database with id ' + connection.threadId);
  connection.query('SELECT * FROM user', function(err, results, fields) {
    if (err) throw err;
    console.log(results);
  });
});

const PORT = 3000;
const app = express();

app.use(express.json());
app.use(cors());

app.get('/test', function(req, res) {
  res.send('Hello World!');
});

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

React组件代码 #

import React from "react";
import axios from 'axios';

class Button extends React.Component {
  handleClick = () => {
    axios.get('/test')
      .then((response) => console.log(response.data))
      .catch((error) => console.error(error));
  }

  render() {
    return (
      <button onClick={this.handleClick}>Afficher les données</button>
    );
  }
}

export default Button;

Package.json配置 #

{
  "name": "management-app",
  "version": "0.1.0",
  "private": true,
  "proxy": {
      "target": "http://127.0.0.1:3000"
    },
  
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.3.0",
    "@fortawesome/free-solid-svg-icons": "^6.3.0",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.3.5",
    "body-parser": "^1.20.2",
    "chart.js": "^4.2.1",
    "cors": "^2.8.5",
    "express": "^4.18.2",
    "mysql": "^2.18.1",
    "mysql2": "^3.2.0",
    "react": "^18.2.0",
    "react-chartjs-2": "^5.2.0",
    "react-dom": "^18.2.0",
    "react-minimal-pie-chart": "^8.4.0",
    "react-router-dom": "^6.8.2",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "start-backend": "node database.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "css-loader": "^6.7.3"
  },
  "description": "This project was bootstrapped with Create React App.",
  "main": "database.js",
  "keywords": [],
  "author": "",
  "license": "ISC"
}

问题原因及解决方法 #

核心问题 #

1. 端口冲突：React开发服务器默认占用3000端口，你的Node.js后端也使用了3000端口，导致React启动后后端无法正常监听该端口，代理请求因目标端口无服务响应而失败。
2. 代理配置格式错误：Create React App的单目标代理应直接使用字符串格式，你当前的对象格式配置不合法，无法正确生效。

解决步骤 #

1. 修改后端端口
   在API代码中将端口改为3001（或其他未被占用的端口）：

   const PORT = 3001; // 替换原有的3000
   

2. 修正代理配置
   将package.json中的proxy字段改为字符串格式：

   "proxy": "http://localhost:3001"
   

3. 重启服务

   • 关闭所有已启动的React和后端服务
   • 启动后端：执行npm run start-backend（或node server.js，确保文件名与实际一致）
   • 启动React：执行npm start

4. 验证请求
   点击按钮后，React的请求会通过代理转发到http://localhost:3001/test，即可正常获取响应。

额外注意 #

• 确认后端启动后控制台输出Server running on port 3001，证明服务正常运行
• 后端已配置cors中间件，可处理跨域问题，无需额外配置

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