ReactJS中Axios Delete请求报400 Bad Request问题解决

针对你遇到的问题，结合代码分析，给出以下几种排查和解决方向：

1. 修正请求体的序列化方式 #

你的代码中手动用JSON.stringify()处理了请求体，但Axios会自动对data参数进行JSON序列化并设置正确的Content-Type: application/json头。手动转成字符串会导致后端无法正确解析请求体，引发400错误。

修改confirmDelete函数：

const confirmDelete = async (id) => {
  const payload = {
    id: id.toString(),
  }

  try {
    await axios.delete(
      'http://localhost:4001/admin/movies/delete',
      {
        data: payload, // 移除JSON.stringify包裹
      }
    )
    // 删除成功后刷新电影列表
    const result = await axios(`http://localhost:4001/movies`);
    setMovies(result.data.data);
  } catch (err) {
    console.error('删除失败:', err.response?.data || err.message);
    setErrorMessage(err.response?.data || '删除操作失败');
  }
}

2. 检查后端路由的参数接收方式 #

很多后端框架（如Express）处理Delete请求时，更倾向于将资源ID放在URL路径中，而非请求体里。如果你的后端路由是按照/admin/movies/delete/:id这种格式设计的，那么当前通过请求体传ID的方式就不匹配，会导致400错误。

修改请求方式，将ID拼入URL：

const confirmDelete = async (id) => {
  try {
    await axios.delete(`http://localhost:4001/admin/movies/delete/${id}`)
    // 刷新列表
    const result = await axios(`http://localhost:4001/movies`);
    setMovies(result.data.data);
  } catch (err) {
    console.error('删除失败:', err.response?.data || err.message);
    setErrorMessage(err.response?.data || '删除操作失败');
  }
}

同时确认后端路由配置是否正确，比如Express中应配置为：

router.delete('/admin/movies/delete/:id', (req, res) => {
  // 通过req.params.id获取ID
})

3. 完善后端CORS配置 #

虽然你设置了allowOrigin: true，但CORS配置可能缺少对Delete方法和必要请求头的支持。确保后端允许Delete方法以及Content-Type头：
以Express的cors中间件为例：

const cors = require('cors');
app.use(cors({
  origin: true,
  methods: ['GET', 'POST', 'PUT', 'DELETE'], // 明确允许Delete方法
  allowedHeaders: ['Content-Type'] // 允许Content-Type头
}));

4. 增加错误捕获与日志 #

原代码中confirmDelete没有错误捕获逻辑，无法看到具体的错误详情。添加try/catch后，可以在控制台查看后端返回的具体错误信息，帮助更快定位问题。

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