React中Axios发送delete/put请求报404但Postman及GET/POST正常

核心问题原因 #

• 未使用自定义的Axios实例：你已经通过Axios.create()创建了带baseURL配置的api实例，但实际发请求时调用的是全局Axios.delete()，没有用到配置的http://localhost:8000前缀，请求默认发往前端应用所在的域名根路径，匹配不到后端接口所以返回404。
• 请求参数传递格式错误：Axios的delete方法第二个参数是请求配置对象，要传递请求体数据必须放在配置的data字段中，你直接传递{index:name}的写法不符合API规范，数据无法被正确携带发送。put请求如果和delete写法一致，也存在同样的参数格式问题。

修复后的代码示例 #

正确的delete请求写法 #

// 使用自定义的api实例发请求，自动携带baseURL配置
api.delete("/", {
  data: { index: name }
})
.then((response)=>{console.log(response)})
.catch((err)=>{console.log(err)});

正确的put请求写法 #

// put方法第二个参数直接为请求体数据，同样使用自定义api实例
api.put("/", {
  index: name,
  // 其他需要传递的字段
})
.then((response)=>{console.log(response)})
.catch((err)=>{console.log(err)});

验证方法 #

修改完成后可打开浏览器开发者工具的「网络」面板，检查实际请求的URL、请求方法、请求体内容，确认和Postman发送的请求参数一致即可。

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