React调用Axios Delete接口遇404错误求助（Node+MySQL）

核心问题：路由路径缺少前缀斜杠 #

你的后端Index.js中，POST和DELETE路由的路径都未以斜杠/开头，导致Express无法正确匹配前端请求路径：

• 错误写法：app.post("api/post", ...)、app.delete("api/remove/:id", ...)
• 正确写法：app.post("/api/post", ...)、app.delete("/api/remove/:id", ...)

Express路由路径必须以/开头，否则会被解析为相对路径，无法匹配前端发送的http://localhost:7003/api/remove/2这类绝对路径请求，直接返回404状态码。

其他优化建议 #

1. 前端删除操作的异步逻辑修正
   当前deleteUser函数中，axios.delete是异步操作，直接调用loadData()会导致数据刷新在删除请求完成前执行，页面无法及时更新。改成异步等待模式：

const deleteUser = async (id) => {
  console.log("clicked");
  try {
    await axios.delete(`http://localhost:7003/api/remove/${id}`);
    toast.success("用户删除成功");
    loadData();
  } catch (err) {
    toast.error("删除失败，请重试");
    console.error(err);
  }
};

2. 后端路由添加响应反馈
   你的POST和DELETE接口未给前端返回响应，会导致前端请求超时或无法确认操作结果，需补充响应逻辑：

// 修复后的POST接口
app.post("/api/post", (req, res) => {
  const { name, location, amount } = req.body;
  const sqlInsertQuery = "insert into customer (name,location,amount) values (?,?,?)";
  db.query(sqlInsertQuery, [name, location, amount], (error, result) => {
    if (error) {
      console.log(error);
      return res.status(500).json({ success: false, message: "插入失败" });
    }
    res.status(200).json({ success: true, message: "用户添加成功" });
  });
});

// 修复后的DELETE接口
app.delete("/api/remove/:id", (req, res) => {
  const { id } = req.params;
  const deleteQuery = "delete from customer where id = ?";
  db.query(deleteQuery, [id], (error, result) => {
    if (error) {
      console.log(error);
      return res.status(500).json({ success: false, message: "删除失败" });
    }
    // 校验是否有行被删除，避免删除不存在ID时返回成功
    if (result.affectedRows === 0) {
      return res.status(404).json({ success: false, message: "用户不存在" });
    }
    res.status(200).json({ success: true, message: "用户删除成功" });
  });
});

3. 前端按钮文本修正
   Home.js表格中第三个按钮文本为Edit但链接指向/view/${item.id}，建议改为View避免混淆：

<Link to={`/view/${item.id}`}>
  <button>View</button>
</Link>

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