Express+MySQL+React项目：Axios GET失败及后端崩溃问题求助

核心问题拆解 #

1. 后端服务器持续崩溃：修改数据库端口为8000后，数据库连接失败导致服务器无法稳定运行
2. Axios请求返回根路径内容：后端未正常启动时，请求被前端开发服务器接管，返回前端根路由内容
3. 浏览器显示cannot GET /：前端开发服务器与后端端口冲突，或前端路由未配置根路径

解决方案步骤 #

1. 修复后端数据库连接问题（解决服务器崩溃） #

后端崩溃的直接原因是数据库端口配置错误：MySQL默认运行端口为3306，除非你手动修改过MySQL配置文件，否则将mysql2.createConnection中的port改回3306即可。同时添加数据库连接错误监听，避免服务器无限崩溃循环：

修改后的数据库连接代码：

const db = mysql2.createConnection({
  host: "localhost",
  user: "luthfi",
  password: "luthfi@MYSQL",
  database: "mastercrm",
  port: 3306, // 改回MySQL默认端口，若你确实修改过MySQL端口则填对应值
});

// 添加数据库连接错误监听
db.connect((err) => {
  if (err) {
    console.error('数据库连接失败:', err.message);
    process.exit(1); // 连接失败时直接退出进程，避免循环崩溃
  }
  console.log('成功连接到MySQL数据库');
});

2. 隔离前后端端口（解决请求混淆问题） #

React开发服务器默认端口也是3000，与后端监听的3000端口冲突，导致请求被前端服务器接管：

• 修改前端端口：在React项目根目录创建.env文件，添加PORT=3001；或修改package.json中的启动脚本：

  "scripts": {
    "start": "PORT=3001 react-scripts start",
    // ...其他脚本
  }
  

• 确认Axios请求地址正确：你的前端代码中Axios地址已经是http://localhost:3000/data/contacts，只要后端正常运行，就能正确获取数据。

3. 验证后端服务状态 #

启动后端后，先通过浏览器直接访问http://localhost:3000/data/contacts，确认能返回JSON数据，再启动前端测试Axios请求。如果后端仍报错，检查：

• MySQL服务是否正在运行
• 数据库用户名、密码、库名是否正确
• 防火墙是否阻止了3306端口的连接

4. 解决浏览器cannot GET /问题 #

如果是访问前端根路径（http://localhost:3001/）出现该错误，需要确保React路由配置了根路径组件：

// 在路由配置文件（如App.js）中
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Dashboard from './Dashboard';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Dashboard />} />
        // ...其他路由
      </Routes>
    </Router>
  );
}

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