React表单提交MySQL遇Axios 404错误求助（附代码）

404错误的核心是前端请求的后端接口不存在或后端服务未正常运行，和按钮类型无关，以下是具体排查和修复步骤：

一、先确认后端服务状态 #

1. 启动server.js后，检查终端是否输出Server listening on port 3001，如果没有，说明后端服务未启动：
   • 先执行npm install express mysql2 body-parser cors安装所有依赖，再重新启动服务。
2. 用curl或Postman直接测试后端接口：

   curl -X POST http://localhost:3001/submit-form -H "Content-Type: application/json" -d '{"fname":"test","email":"test@example.com","text":"hello"}'
   

   • 返回404 → 后端路由未注册或服务异常；返回500 → 数据库环节有问题。

二、修复后端代码关键细节 #

1. 添加数据库连接校验 #

当前代码未校验数据库连接状态，若连接失败，服务无法正常处理请求，添加连接日志：

const express = require('express');
const mysql = require('mysql2');
const bodyParser = require('body-parser');
const app = express();
const cors = require('cors');
app.use(cors());

app.use(bodyParser.json());

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

// 新增数据库连接校验
connection.connect((err) => {
  if (err) {
    console.error('数据库连接失败:', err);
    return;
  }
  console.log('数据库连接成功');
});

app.post('/submit-form', (req, res) => {
  const { fname, email, text } = req.body;

  const query = 'INSERT INTO form_data (fname, email, text) VALUES (?, ?, ?)';
  const values = [fname, email, text];

  connection.query(query, values, (error, results) => {
    if (error) {
      console.error('插入数据失败:', error);
      res.sendStatus(500);
    } else {
      res.sendStatus(200);
    }
  });
});

app.listen(3001, () => {
  console.log('Server listening on port 3001');
});

启动后看终端输出，若显示数据库连接失败，检查MySQL服务是否启动、账号密码/数据库名是否正确。

2. 确认路由路径完全匹配 #

前端请求的http://localhost:3001/submit-form和后端app.post('/submit-form', ...)路径一致，注意不要出现大小写、斜杠拼写错误。

三、前端代码优化（可选） #

如果前端用Create React App，配置代理简化请求并避免跨域：

1. 在前端package.json中添加：

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

2. 修改myform.jsx的axios请求为相对路径：

   axios.post('/submit-form', { fname, email, text })
   

四、排查顺序建议 #

1. 启动后端服务，确认终端输出正常；
2. 用Postman测试后端接口，确保返回200/500（而非404）；
3. 检查数据库：确认formgym库存在，form_data表有fname、email、text字段；
4. 最后测试前端表单提交。

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