Vue-Resource Delete请求无法传递数据，服务器接收空对象求助

我之前踩过这个坑！你遇到的问题其实是HTTP DELETE请求的请求体兼容性问题——虽然Postman这类工具支持在DELETE里带请求体，但Vue-resource和Express的默认配置组合起来会导致数据没法正常传递，下面给你具体的解决步骤：

前端Vue-resource的正确写法 #

默认情况下，Vue-resource的delete方法不会自动把数据放到请求体里，你需要手动在配置项的body字段中传入数据，同时指定Content-Type请求头：

// 错误写法（后端会收到空对象）
this.$http.delete('/api/your-route', { id: 123 })
  .then(res => { /* 处理响应 */ })

// 正确写法
this.$http.delete('/api/your-route', {
  body: { id: 123 }, // 把数据放在body里
  headers: {
    'Content-Type': 'application/json' // 明确指定请求体格式
  }
})
.then(response => {
  console.log('删除请求成功:', response)
})
.catch(err => {
  console.error('请求出错:', err)
})

后端Express的配置检查 #

确保你在路由之前就挂载了express.json()中间件，它负责解析JSON格式的请求体——如果这个中间件放在路由之后，DELETE请求的body就会无法被解析：

const express = require('express')
const app = express()

// 必须在路由之前加载这个中间件！
app.use(express.json())

// 你的DELETE路由
app.delete('/api/your-route', (req, res) => {
  console.log('收到的请求数据:', req.body) // 现在能正常拿到数据了
  // 处理删除逻辑...
  res.status(200).json({ message: '删除成功' })
})

app.listen(3000, () => {
  console.log('服务器运行在3000端口')
})

替代方案：用URL查询参数传递数据 #

如果不想纠结请求体的兼容性问题，也可以把数据放到URL的查询参数里，这更符合HTTP DELETE请求的传统用法：

// 前端：把数据拼在URL里
this.$http.delete(`/api/your-route?id=123`)
  .then(res => { /* 处理响应 */ })

// 后端：通过req.query获取数据
app.delete('/api/your-route', (req, res) => {
  const itemId = req.query.id
  console.log('要删除的ID:', itemId)
  // 处理删除逻辑...
})

这样不管是Vue-resource还是Postman，都能正常传递和接收数据啦！

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