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

Question

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

我试图通过将 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)
  }
}

这是快递方面的路线：

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:

的工作 Postman 删除请求的正文

{
    "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: {}

Answer 1

Axios .delete()'s second argument is a config object. (TypeScript type definition here.) If you want to pass a body, you can use the data config option:

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

在你的情况下（假设 Api() returns 一个 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.

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

ExpressJs server receives empty request object from VueJS on delete request using axios, but Postman works

express

vue.js

axios

knex.js

objection.js