React+Node+MySQL项目/test接口404错误排查求助

问题概述 #

开发基于React、Node.js和MySQL的项目时，点击按钮调用/test接口始终返回http://localhost:3000/test 404 (Not Found)。API已成功连接数据库（终端可正常读取数据），修改API端口后问题仍未解决。React项目已配置代理，预期点击按钮后控制台输出API请求结果。

相关代码 #

API代码

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

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

connection.query('SELECT * FROM user', function(err, results, fields) {
  console.log(results);
});

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

app.use(cors());

app.get('/test', (req, res) => {
  connection.query('SELECT username FROM user', (error, results, fields) => {
    if (error) {
      console.error(error);
      res.status(500).send('Erreur interne du serveur');
    } else {
      const usernames = results.map((row) => row.username);
      console.log(usernames);
      res.send('Usernames affichés dans la console');
    }
  });
});

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;

React项目package.json配置

{ 
  "name": "management-app", 
  "version": "0.1.0", 
  "private": true, 
  "proxy": "localhost:3000", 
  "dependencies": { /* ... */ }, 
  "scripts": { /* ... */ }, 
  /* ... */ 
}

排查与修复方案 #

1. 解决端口冲突 #

React开发服务器默认端口为3000，你的Node.js API也使用了3000端口，导致两者抢占端口，其中一个服务无法正常提供接口。

修复步骤：

• 修改API代码中的端口为其他值（如3001）：

  const PORT = 3001;
  

• 更新React项目package.json中的代理配置，指向新的API端口并补充协议：

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

• 重启Node.js API服务和React开发服务器

2. 验证代理配置有效性 #

修改package.json后必须重启React开发服务器，代理配置才会生效。可以通过以下方式验证：

• 直接在浏览器访问http://localhost:3001/test，确认API能正常返回内容
• 若直接访问API正常，但React请求仍404，可临时修改axios请求为全地址测试：

  axios.get('http://localhost:3001/test')
  

  如果请求成功，说明代理配置未生效，需检查React服务器是否重启，或代理配置格式是否正确。

3. 检查路由与中间件 #

确认API代码中/test路由没有被其他中间件拦截，比如是否在路由之前使用了app.use(express.static(...))或其他可能修改请求路径的中间件。当前API代码中没有此类问题，但如果后续添加了中间件需要注意顺序。

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