Axios调用接口删除MySQL数据返回404错误问题咨询

报404的核心问题有3个：

• 请求方法不匹配。前端Axios.delete()默认发HTTP DELETE请求，你后端写的是app.get()，只接收GET请求，路径对得上但请求方法不对，服务端直接返回404。
• 前端传参格式错误。Axios的delete方法第二个参数是配置对象，其中data字段就是完整的请求体。你现在直接把ID值赋给data，请求体就是纯ID值，后端写的req.body.data会取到undefined，就算路由匹配上了SQL也会因为参数为空执行失败。
• 后端配置不全。如果没加express.json()中间件解析JSON请求体，不管前端怎么传，req.body都是undefined；而且你现在的接口逻辑没有给前端返回任何响应，请求会一直挂起。

后端修改 #

1. 先在所有路由定义前加请求体解析中间件，不然拿不到前端传的JSON参数：

const express = require('express')
const app = express()
// 新增这行
app.use(express.json())

2. 把GET路由改成DELETE路由，和前端请求方法对齐，补充响应逻辑：

app.delete('/api/delete/rec', (req, res) => {
  const dataID = req.body.data;
  const sql = "DELETE FROM `recipes` WHERE ID = ?";
  db.query(sql, dataID, (err, result) => {
    if (err) {
      // 出错返回错误信息给前端
      return res.status(500).json({ code: 500, msg: '删除失败', error: err })
    }
    // 执行成功返回结果
    res.json({ code: 200, msg: '删除成功', data: result })
  });
})

前端修改 #

修正传参结构，加上catch捕获异常，避免控制台抛未捕获的Promise错误：

Axios.delete('http://localhost:3001/api/delete/rec', {
  data: {
    // 这里要包一层对象，后端才能从req.body.data拿到ID值
    data: props.recipe[0].ID
  }
}).then((res) => {
  console.log('删除接口返回', res);
}).catch(err => {
  console.error('请求异常', err)
})

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