MEVN栈开发中Axios DELETE请求出现404错误求助

你的Axios DELETE请求最终出现404并跳转到根路径，核心问题出在Express路由的响应逻辑上，具体分析和修复如下：

问题根源 #

1. 错误的重定向操作：你的Express DELETE路由中调用了res.redirect("/")，这会向客户端返回302重定向响应。Axios作为AJAX请求库，会自动跟随重定向，将原本的DELETE请求转换成GET请求访问根路径http://localhost:9999/。
2. 异步操作未等待：itemModel.findOneAndDelete是异步数据库操作，当前代码未等待它执行完成就直接返回响应，可能导致删除操作未生效。
3. 根路径无对应API：根路径/绑定的是Vue静态文件，没有处理GET请求的API接口，因此Axios发起的GET请求返回404错误。

修复步骤 #

1. 修正Express DELETE路由 #

修改MEVN_testing/server/src/routes/routes.js中的DELETE路由：

router.delete("/:id", async (req, res) => {
    // 等待数据库删除操作完成
    await itemModel.findOneAndDelete({ id: req.params.id });
    // 返回JSON格式的成功响应，而非重定向
    res.status(200).json({ success: true, message: "条目删除成功" });
});

• 使用async/await确保数据库操作完成后再响应客户端。
• 移除res.redirect，改用JSON响应适配AJAX请求的交互逻辑。

2. 优化Vue端响应处理（可选） #

可以在Axios回调中增加响应提示，提升交互体验：

DeleteItem(item) {
  axios
    .delete(`http://localhost:9999/item/${item.id}`)
    .then((res) => {
      console.log("DELETE请求完成...", res.status);
      console.log(res.data.message);
      this.UpdateList();
    })
    .catch((err) => console.log(err));
}

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