Axios.post请求/api/insert接口返回404 Not Found错误排查

核心错误点 #

• 直接触发404的根因：前后端HTTP请求方法不匹配。前端使用axios.post发起POST类型请求，但后端对应路径注册的是app.get的GET类型路由，HTTP协议要求请求方法和路由注册方法完全一致才能匹配成功，因此哪怕路径填写正确也会返回404。
• 异步逻辑错误：后端数据库查询db.query是异步操作，原代码在查询回调外部就执行res.send(re)，此时数据库还未返回结果，re始终是空字符串，甚至会触发「响应已发送」的运行时报错。
• SQL语句错误：插入语句的占位符数量和传入参数不匹配，VALUES后写了7个?占位符，但实际只传入了6个字段值，执行时会抛出SQL语法错误。
• 日志打印错误：后端实际监听5000端口，但启动日志打印的是running on 3001，会误导端口排查。

具体修复步骤 #

1. 将后端/api/insert路由的注册方法从app.get改为app.post，和前端请求方法对齐。
2. 把res.send逻辑移动到db.query的回调函数内部，确保拿到数据库执行结果后再返回响应。
3. 修正SQL插入语句的占位符数量，匹配实际传入的6个字段。
4. 修改后端启动日志的端口打印内容，和实际监听端口保持一致。
5. 补充express.json中间件，方便后续接收POST请求传递的动态参数。

修复后代码示例 #

前端请求代码 #

// 后续需要传递动态参数时，把参数对象放到post方法的第二个参数位置即可
axios.post("http://localhost:5000/api/insert")
  .then((res)=>{
    alert("Successfully entered data");
  }).catch((e)=>{
    console.log(e.response.data);
  });

后端服务代码 #

const express = require('express');
const app = express();
// 补充JSON解析中间件
app.use(express.json());

// 路由方法从get改为post
app.post("/api/insert",(req, res)=>{
    const f_name = "ali";
    const l_name = "ahmed";
    const u_name = "afaq";
    const pass = "12345";
    const email = "afaqsabghatullah@gmail.com";
    const dob = "2000-12-10";
    // 修正占位符数量为6个，和传入字段数对齐
    const insertSql = 'INSERT INTO user(user_name,first_name,last_name,password,email,dob) VALUES(?,?,?,?,?,?)'
    db.query(insertSql,[u_name, f_name,l_name,pass,email,dob],(err,result)=>{
        if(err){
            console.log(err);
            // 查询出错时返回错误信息，状态码设为500
            return res.status(500).send(err);
        }
        console.log(result);
        // 响应逻辑移到回调内部，查询完成后再返回
        res.send(result);
    });
})

app.listen(5000, ()=>{
    // 修正日志打印的端口信息
    console.log('running on port 5000');
})

修复完成后重启后端服务，再发起请求即可正常匹配路由，不会再出现404错误。

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