ExpressJs 服务器使用 axios 在删除请求时从 VueJS 接收空请求对象，但 Postman 可以工作答案

【问题标题】：ExpressJs server receives empty request object from VueJS on delete request using axios, but Postman worksExpressJs 服务器使用 axios 在删除请求时从 VueJS 接收空请求对象，但 Postman 可以工作
【发布时间】：2020-01-23 23:32:52
【问题描述】：

我在前端使用带有 Postgres/Knex/Objection 和 VueJS 的 ExpressJS。我有用户、组和成员资格 s.t.成员资格表关联用户和组。

我正在尝试通过将 groups_id 和 users_id 发送到快速路由来从 vue 中删除成员资格。

在 Postman 中一切正常，但 req.body 在快递方面是空的。

在 Vue 方面，这是我的 Vue delete 方法：

async deleteMembership() {
  await MembershipsService.deleteMembership({
    membership: {
      groupId: this.group.id,
      userId: this.$store.getters.user.id
    }
  });
  this.$emit("membership-deleted");
  console.log('membership has been deleted');
}

这是我的MembershipsService：

import Api from '@/services/Api'

export default {
  fetchMemberships () {
    return Api().get('memberships')
  },

  ...

  deleteMembership (params) {
    console.log('these are the request params: ', params);
    return Api().delete('memberships/', params)
  }
}

这是从 Express 一侧出发的路线：

router.delete('/', async (req, res) => {
  // deletes a membership
  console.log('this is the req: ', req);
  await Membership
    .query()
    .delete()
    .where('users_id', '=', req.body.membership.userId )
    .andWhere('groups_id', '=', req.body.membership.groupId )
  res.json({
    success: true, message: 'membership deleted' 
  });
});

这是对http://localhost:8000/api/memberships的工作邮递员删除请求的正文：

{
    "membership":
    { 
        "userId": 8,
        "groupId": 1 
    }
}

这是 Vue.js 上非工作请求的正文：

these are the request params:  {membership: {…}}membership: groupId: 1userId: 8__proto__: Object__proto__: Object

这是快递方面的错误：

UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'userId' of undefined

这是 Express 中的 req.body 对象：

body: {}

【问题讨论】：

标签： express vue.js axios knex.js objection.js

【解决方案1】：

Axios .delete()'s second argument is a config object.(TypeScript type definition here.) 如果要传递一个body，可以使用data config option：

axios.delete('https://some.url/resource', {data: {foo: 'bar': baz: 123}})

在你的情况下（假设Api() 返回一个 axios 实例）：

deleteMembership (params) {
  console.log('these are the request params: ', params);
  return Api().delete('memberships/', {data: params})
}

演示：

axios.delete('https://reqres.in/api/users/2', {
  data: {
    foo: 'bar'
  }
}).then(function(response) {
  console.log(response);
});

<script src="https://unpkg.com/axios@0.19.0/dist/axios.min.js"></script>

Use the developer tools 'Network' tab to inspect the call and see the payload is sent.

【讨论】：

永远不会发现这个。谢谢！