我在ReactJS中编程时使用Axios,我假装向服务器发送DELETE请求。

要做到这一点,我需要头文件:

headers: {
  'Authorization': ...
}

而身体是由

var payload = {
    "username": ..
}

我一直在网上搜索,只发现DELETE方法需要一个“参数”,不接受“数据”。

我一直想这样发送

axios.delete(URL, payload, header);

甚至

axios.delete(URL, {params: payload}, header);

但似乎什么都不管用……

有人能告诉我,如果这是可能的(我假设是)发送一个删除请求与头部和主体,以及如何这样做?


当前回答

所以在尝试了几次之后,我发现它起作用了。

请按顺序做,这很重要,否则不行

axios.delete(URL, {
  headers: {
    Authorization: authorizationToken
  },
  data: {
    source: source
  }
});

其他回答

我也遇到过同样的问题…… 我通过创建一个自定义axios实例解决了这个问题。并使用它来进行身份验证删除请求..

const token = localStorage.getItem('token');
const request = axios.create({
        headers: {
            Authorization: token
        }
    });

await request.delete('<your route>, { data: { <your data> }});

下面是使用axios发送各种http动词所需的格式的简要总结:

GET: Two ways First method axios.get('/user?ID=12345') .then(function (response) { // Do something }) Second method axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { // Do something }) The two above are equivalent. Observe the params keyword in the second method. POST and PATCH axios.post('any-url', payload).then( // payload is the body of the request // Do something ) axios.patch('any-url', payload).then( // payload is the body of the request // Do something ) DELETE axios.delete('url', { data: payload }).then( // Observe the data keyword this time. Very important // payload is the request body // Do something )

关键要点

获取请求可选地需要一个params键来正确设置查询参数 删除带有主体的请求需要将其设置在数据键下

我尝试了以上所有的方法,但对我都不起作用。我最终只是使用PUT(灵感来自这里),只是改变了我的服务器端逻辑,对这个url调用执行删除。(django rest框架函数重写)。

e.g.

.put(`http://127.0.0.1:8006/api/updatetoken/20`, bayst)
      .then((response) => response.data)
      .catch((error) => { throw error.response.data; });

此代码是由post man生成的,它可以很好地处理带有body的删除API请求。

var data = JSON.stringify({"profile":"false","cover":"true"});

var config = {
  method: 'delete',
  url: 'https://api.fox.com/dev/user/image',
  headers: { 
    'Authorization': 'Bearer token', 
  },
  data : data
};

axios(config)
.then(function (response) {
  console.log(JSON.stringify(response.data));
})
.catch(function (error) {
  console.log(error);
});

对于Axios DELETE Request,您需要在一个JSON对象下包含请求有效负载和头部:

axios.delete(URL, {
  headers: {
    'Authorization': ...
  }, 
  data: {
    "username": ...
  }
})

为什么我不能这样做,因为我做类似的POST请求?

查看Axios文档,我们看到.get、.post…有不同的签名:

axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

注意只有post, patch和put有data参数。这是因为这些方法通常包含一个主体。

查看RFC7231,我们看到DELETE请求不需要有body;如果您包含一个主体,那么它的含义在规范中没有定义,服务器也不需要理解它。

DELETE请求消息中的有效负载没有定义的语义;在DELETE请求上发送有效负载主体可能会导致某些现有实现拒绝该请求。

(此处第5段)。

在这种情况下,如果您还控制着服务器,那么您可以决定在请求中接受这个主体,并给它任何您想要的语义。也许你正在与别人的服务器合作,他们期望这个身体。

因为规范中没有定义带主体的DELETE请求,而且它们并不常见,所以Axios没有将它们包含在这些方法别名中。但是,因为它们是可能的,你可以做到,只是需要多一点努力。

我认为这将是更传统的包括url上的信息,所以你会这样做:

axios.delete(
  `https://example.com/user/${encodeURIComponent(username}`, 
  { headers: ... }
)

或者,如果您希望能够使用不同的标准删除用户(有时通过用户名,或通过电子邮件,或通过id…)

axios.delete(
  `https://example.com/user?username=${encodeURIComponent(username)}`, 
  { headers: ... }
)