React中Axios发送Delete请求返回422状态码问题排查

你的问题核心在于Axios DELETE请求的参数格式不正确。Axios的delete方法签名与POST、PUT不同，请求体不能直接作为第二个参数传递，必须嵌套在配置对象的data属性中，这就是前端请求返回422（通常表示数据验证失败）但Postman能成功的原因。

修改后的DeleteRoom函数 #

const DeleteRoom = async(data) => {
  console.log("Body sent to server", {
    home_rooms: [data.item], 
  })
  try {
    const result = await axios.delete("xxx.com", {
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${cookies.get('accesstoken')}`
      },
      data: { // 请求体必须放在config的data字段内
        home_rooms: [data.item], 
      }
    });
    alert('删除房间成功！');
    console.log('删除房间成功！');
    // 优化：直接更新本地列表，无需重新请求接口
    setRoomName(prevList => prevList.filter(room => room !== data.item));
  } catch (err) {
    alert('删除房间失败！');
    console.log(err);
    console.log('删除房间失败！');
  }
}

关键说明 #

• Axios的delete(url[, config])方法中，请求体必须放在config.data属性里，而非单独作为参数传递，否则后端无法正确解析到请求数据。
• Postman能成功是因为它默认将请求体放在了DELETE请求的body中，和Axios正确配置后的请求结构一致。
• 额外优化：删除成功后直接过滤本地状态更新列表，避免重复调用接口，提升页面响应速度。

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