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

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

headers: {
  'Authorization': ...
}

而身体是由

var payload = {
    "username": ..
}

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

我一直想这样发送

axios.delete(URL, payload, header);

甚至

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

但似乎什么都不管用……

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


当前回答

使用{data: {key: value}} JSON对象,示例代码片段如下所示:

// Frontend Code

axios.delete(`URL`, {
        data: {id: "abcd", info: "abcd"},
      })
      .then(res => {
        console.log(res);
      });

// Backend Code (express.js)

  app.delete("URL", (req, res) => {
  const id = req.body.id;
  const info = req.body.info;
  db.query("DELETE FROM abc_table WHERE id=? AND info=?;", [id, info],
    (err, result) => {
      if (err) console.log(err);
      else res.send(result);
    }
  );
});

其他回答

下面是使用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键来正确设置查询参数 删除带有主体的请求需要将其设置在数据键下

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

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

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

对于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: ... }
)

我遇到了同样的问题,我是这样解决的:

axios.delete(url, {data:{username:"user", password:"pass"}, headers:{Authorization: "token"}})

对于那些尝试了以上所有方法但仍然没有看到请求的有效负载的人-请确保您有:

"axios": "^0.21.1" (not 0.20.0)

那么,上面的解决方案就起作用了

axios.delete("URL", {
      headers: {
        Authorization: `Bearer ${token}`,
      },
      data: {
        var1: "var1",
        var2: "var2"
      },
    })

你可以访问有效载荷

req.body.var1, req.body.var2

问题在于:

https://github.com/axios/axios/issues/3335