Axios POST请求返回404错误 数据无法插入数据库问题排查

问题场景 #

• 前端：基于React搭建表单采集员工姓名、年龄、国籍、职位、薪资信息，通过Axios向后端POST接口提交数据
• 后端：基于Express搭建服务，预期接收请求后将数据写入MySQL的employeesystem库employee表
• 异常：点击提交按钮后请求返回404，更换端口、释放端口占用、核对库表字段、重启IDE均无法解决，数据无法写入数据库

原有实现代码 #

前端React代码 #

import {useState} from "react";
import Axios from "axios"
function App() {

  const [name, setName] = useState("");
  const [age, setAge] = useState(0);
  const [country, setCountry] = useState("");
  const [position, setPosition] = useState("");
  const [wage, setWage] = useState(0);


  const addEmployee =()=>{
    console.log(name)
    Axios.post('http://localhost:6667/create', {name:name, age:age, country:country, position:position, wage:wage,})
    .then(()=>{
      console.log("Success from frontend")
    })

  }

  return (
    <div className="App">
      
  <label htmlFor="name">Name:</label>
  <input type="text" id="name" name="name" onChange={(event)=>{setName(event.target.value)}}></input>

  <label htmlFor="Age">Age</label>
  <input type="text" id="Age" name="Age"  onChange={(event)=>{setAge(event.target.value)}}></input>

  <label htmlFor="Country">Country</label>
  <input type="text" id="Country" name="Country" onChange={(event)=>{setCountry(event.target.value)}}></input>

  <label htmlFor="Position">Position</label>
  <input type="text" id="Position" name="Position" onChange={(event)=>{setPosition(event.target.value)}}></input>

  <label htmlFor="Wage">Wage</label>
  <input type="text" id="Wage" name="Wage" onChange={(event)=>{setWage(event.target.value)}}></input>
  
  <button onClick={addEmployee}>Submit</button>
    </div>
  );
}

export default App;

后端Express代码 #

const express = require('express')
const app = express()
const cors = require('cors')
app.use(cors());
app.use(express.json());
const mysql = require('mysql2')
const db = mysql.createConnection({
    user: "root",
    host:"localhost",
    password:"password",   //it could be '' or 'password'
    database:'employeesystem'
});


app.post("/create", (request, response)=>{

    const name = request.body.name  
    const age = request.body.age
    const country = request.body.country
    const position = request.body.position
    const wage = request.body.wage

    db.query("INSERT INTO employee (name, age, country, position, wage) VALUES (?, ?, ?, ?, ?)", [name, age,country, position, wage], (err, result)=>{
        if (err){
            console.log(err)
        }else{res.send("Values Inserted!")}
    });
});

app.listen(6667, ()=>{
    console.log("Connection to server established")
})

报错截图 #

根因排查 #

404错误的本质是你请求的地址+端口+路径+请求方法，在目标服务上找不到匹配的路由，结合你的代码和操作，问题集中在以下几点：

• 后端服务未正常启动/端口不匹配
  你更换端口时大概率只修改了前端的请求地址，没有同步修改后端app.listen()的端口号，且修改后端代码后没有重启Node服务：Node.js服务不会自动热更新代码，修改端口、路由逻辑后必须手动终止旧进程重新启动，否则后端始终运行旧版本代码、监听旧端口。此时你前端请求的新端口上要么没有服务运行，要么跑着其他不包含/create路由的服务，自然返回404。
  启动后端时如果控制台没有打印Connection to server established，说明服务启动失败，常见原因是未安装依赖（没有执行npm install express cors mysql2）、端口被占用、数据库配置错误导致启动中断。
• 代码存在显性语法错误，即使路由匹配成功也会异常
  你的路由回调参数命名为response，但数据库写入成功后调用的是res.send()，res变量未定义会触发引用错误，即使请求命中路由也会返回500错误，无法正常写入数据。
• 数据库连接逻辑缺失校验
  你没有显式调用db.connect()校验数据库连接状态，也没有监听连接错误，很容易出现数据库连接失败但服务仍然启动的情况，后续写入请求会直接报错。

修复步骤 #

1. 统一前后端端口，重启服务验证
   选定一个未被占用的端口（比如3001），同时修改前端Axios请求地址、后端app.listen()的端口号，先重启后端服务，确认控制台打印启动成功日志，再启动前端服务。可以先用Postman/curl直接向后端/create接口发POST请求，确认接口能正常响应再调前端。
2. 修复后端变量名错误
   将路由中错误的res.send改为response.send。
3. 补全数据库连接校验逻辑
   修正后的完整后端代码参考：

const express = require('express')
const app = express()
const cors = require('cors')
app.use(cors());
app.use(express.json());
const mysql = require('mysql2')
const db = mysql.createConnection({
    user: "root",
    host:"localhost",
    password:"password",   // 替换为你的实际数据库密码
    database:'employeesystem'
});

// 显式校验数据库连接
db.connect((err) => {
  if(err) {
    console.error("数据库连接失败：", err);
    return;
  }
  console.log("数据库连接成功");
  // 数据库连接成功后再注册路由、启动服务
  app.post("/create", (request, response)=>{
      const name = request.body.name  
      const age = request.body.age
      const country = request.body.country
      const position = request.body.position
      const wage = request.body.wage

      db.query("INSERT INTO employee (name, age, country, position, wage) VALUES (?, ?, ?, ?, ?)", [name, age,country, position, wage], (err, result)=>{
          if (err){
              console.log("数据写入失败：", err)
              response.status(500).send("数据写入失败")
          }else{
              response.send("Values Inserted!")}
      });
  });

  app.listen(3001, ()=>{
      console.log("服务启动成功，监听3001端口")
  })
})

4. 前端代码中Axios请求记得加.catch()逻辑捕获错误，方便排查问题。

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