Express中DELETE接口404求助，GET接口可正常运行

问题描述 #

使用Express搭建后端服务，搭配XAMPP的MySQL数据库，调用http://localhost:3001/delete接口时出现404 (Not Found)错误。将接口改为app.get()方法时可正常工作，但使用app.delete()方法就报错。

服务端index.js代码 #

const express = require("express");
const bodyparser = require("body-parser");
const app = express();
const mysql = require("mysql");
const cors = require("cors");

app.use(cors());
app.use(express.json());
app.use(bodyparser.urlencoded({ extended: true }));

const db = mysql.createConnection({
  user: "root",
  host: "localhost",
  password: "",
  database: "ecom_store",
});

app.post("/create", (req, res) => {
  const brand_name = req.body.brand_name;
  const brand_id = req.body.brand_id;

  db.query(
    "INSERT INTO brands (brand_name,brand_id) VALUES (?,?)",
    [brand_name, brand_id],
    (err, result) => {
      if (err) {
        console.log(err);
      } else {
        res.send(result);
      }
    }
  );
});

app.get("/brands", (req, res) => {
  db.query("SELECT * FROM brands", (err, result) => {
    if (err) {
      console.log(err);
    } else {
      res.send(result);
    }
  });
});
app.put("/update", (req, res) => {
  const brand_id = req.body.id;
  const brand_name = req.body.name;
  console.log(brand_id);
  console.log(brand_name);
  db.query(
    "UPDATE brands SET brand_name = ? WHERE brand_id = ?",
    [brand_name, brand_id],
    (err, result) => {
      if (err) {
        console.log(err);
      } else {
        console.log("successfully updated");
        res.send(result);
      }
    }
  );
});
app.delete(`/delete`, async (req, res) => {
  const brand_id = req.body.id;
  console.log(brand_id);
  db.query(
    "DELETE FROM brands WHERE brand_id = ?",
    [brand_id],
    (err, result) => {
      if (err) {
        console.log(err);
      } else {
        res.send(result);
        console.log(result);
      }
    }
  );
});

app.listen(3001, () => {
  console.log("Yey, your server is running on port 3001");
});

客户端代码 #

const deleteDATA = async () => {
  const id = prompt("Enter the Id of the brand");
  axios.delete(`http://localhost:3001/delete`, [id]).then((response) => {
    alert("Successfully deleted");
    console.log(response.data);
  });
};

问题原因 #

客户端调用axios.delete时参数用法错误：axios.delete的第二个参数应为配置对象，而非直接传递数据数组。错误的参数格式导致请求无法被服务端正确解析，甚至引发请求发送异常，最终出现404错误。

解决方案 #

方案1：修正axios调用格式，传递请求体数据 #

保持服务端代码不变，修改客户端请求格式，通过配置对象的data字段传递删除ID：

const deleteDATA = async () => {
  const id = prompt("Enter the Id of the brand");
  axios.delete('http://localhost:3001/delete', {
    data: { id: id }
  }).then((response) => {
    alert("Successfully deleted");
    console.log(response.data);
  }).catch(err => {
    console.error('删除失败:', err);
  });
};

方案2：采用URL参数传递ID（符合RESTful规范） #

修改服务端接口，通过URL参数接收brand_id：

app.delete('/delete/:id', (req, res) => {
  const brand_id = req.params.id;
  console.log(brand_id);
  db.query(
    "DELETE FROM brands WHERE brand_id = ?",
    [brand_id],
    (err, result) => {
      if (err) {
        console.log(err);
        res.status(500).send(err);
      } else {
        res.send(result);
        console.log(result);
      }
    }
  );
});

对应的客户端代码改为通过URL路径传递ID：

const deleteDATA = async () => {
  const id = prompt("Enter the Id of the brand");
  axios.delete(`http://localhost:3001/delete/${id}`).then((response) => {
    alert("Successfully deleted");
    console.log(response.data);
  }).catch(err => {
    console.error('删除失败:', err);
  });
};

验证步骤 #

1. 重启Express服务，确保修改后的代码生效
2. 调用deleteDATA函数，输入品牌ID测试
3. 查看服务端控制台是否打印出正确的brand_id，并确认数据库中对应记录已删除

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