Axios - 如何使用请求体和头信息发送DELETE请求？

Question

我在使用ReactJS编程时正在使用Axios，我想向我的服务器发送一个DELETE请求。

为此，我需要这些头信息：

headers: {
  'Authorization': ...
}

身体由以下组成

var payload = {
    "username": ..
}

我一直在网络上搜索，发现只有DELETE方法需要一个“param”，并且不接受“data”。

我一直尝试着像这样发送：

axios.delete(URL, payload, header);

甚至

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

但似乎什么都不起作用...

有人能告诉我是否可能（我认为是可能的）发送带有头部和正文的DELETE请求，以及如何实现吗？

- Asfourhundred

Answer 1

尝试了几次后，我发现它可以工作。

请按照先后顺序执行非常重要，否则它将无法正常运行。

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

- vishu2124

---

你好，你能解释一下为什么你的答案是正确的吗？ - Franco Gil

可能是因为 DELETE 方法不应该有请求体。也许其中有一些内容可以防止这种情况发生（就像它应该做的那样）。 - Evert

@Evert，那是不正确的，DELETE请求没有为请求体定义语义，因此您可以有请求体，但旧实现可能会拒绝该请求。在我看来，您应该有请求体，并淘汰旧客户端并将新客户端替换到其位置。 - Victor Pudeyev

@VictorPudeyev 嘿，我知道HTTP规范中的语言很令人困惑。是的，一个body可能会出现，但它对服务器没有任何意义。因此，没有充分的理由在HTTP DELETE body中添加body。所以你可以添加一个body，但这是毫无意义的。 - Evert

我的原始评论是正确的。实际上，这是即将发布的HTTP规范中的一段话，它反映了这一点：“客户端不应在DELETE请求中生成内容。接收到的DELETE请求中的内容没有定义的语义，不能改变请求的意义或目标，并可能导致一些实现拒绝该请求。” - Evert

Answer 2

axios.delete支持请求体和请求头。

它接受两个参数：url和可选的配置项config。您可以使用config.data设置请求体和请求头，例如：

axios.delete(url, { data: { foo: "bar" }, headers: { "Authorization": "***" } });

请查看这里 - https://github.com/axios/axios/issues/897

- tarzen chugh

---

事实是我想在同一个删除请求中发送正文和标头。 - Asfourhundred

Answer 3

以下是使用axios发送各种HTTP动词所需的格式的简要概述：

• GET：两种方式

  • 第一种方法

  axios.get('/user?ID=12345')
    .then(function (response) {
      // Do something
    })
  

  • 第二种方法

  axios.get('/user', {
      params: {
        ID: 12345
      }
    })
    .then(function (response) {
      // Do something
    })
  

  这两种方法是等价的。请注意第二个方法中的params关键字。

• POST 和 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
)

• 删除

  axios.delete('url', { data: payload }).then(
    // Observe the data keyword this time. Very important
    // payload is the request body
    // Do something
  )
  

要点

• get请求需要一个params关键字来正确设置查询参数
• delete请求使用body时需要将其设置在data关键字下

- Van_Paitin

---

你的回答让我希望 Stack Overflow 上有一个 +2 的赞同功能。 - eli-bd

@MaFiA，如果你想用参数发送删除请求，你可以简单地将它放在URL中使用查询字符串。 - Van_Paitin

我无法让它工作。发送 axios.delete('some-url',{data: someObj}) 会发送一个没有主体的 DELETE 消息。 - geoidesic

someObj 可能为 null 或未定义。在发送请求之前，请确保没有对 someObj 进行过修改。 - Van_Paitin

它不起作用，我发送了 {data: payload} 以进行删除，但仍然不会发送任何请求体。 - Amar Ratna Shakya

Answer 4

axios.delete接受一个url和一个可选配置项。

axios.delete(url[, config])

配置选项中可用的字段包括headers。

这使得API调用可以写成：

const headers = {
  'Authorization': 'Bearer paperboy'
}
const data = {
  foo: 'bar'
}

axios.delete('https://foo.svc/resource', {headers, data})

- Oluwafemi Sule

---

这对我不起作用... 我有 const headers = {'Authorization': ...} 和 data = {'username': ...} 最终使用 axios.delete('http://...', {headers, data}) 但服务器无法访问头信息... - Asfourhundred

从浏览器发出的请求与实际情况不同。请参考此 Stackblitz（https://stackblitz.com/edit/react-gq1maa）以及浏览器网络选项卡中的请求（https://snag.gy/JrAMjD.jpg）。您需要确保在服务器端正确阅读标头，或者请求没有被拦截和篡改。 - Oluwafemi Sule

适用于我，我正在使用React和Django。 - Harshit Gangwar

Answer 5

如果您尝试了上述所有方法仍然无法在请求中看到有效载荷，请确保：

"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

- x4wiz

Answer 6

删除时，您需要按照以下步骤进行操作

axios.delete("/<your endpoint>", { data:<"payload object">})

对我起作用了。

- Hemantkumar Gaikwad

Answer 7

实际上，axios.delete 支持请求体。
它接受两个参数：一个 URL 和一个可选的 config。就是这样...

axios.delete(url: string, config?: AxiosRequestConfig | undefined)

您可以通过以下方式设置删除请求的响应正文：

let config = { 
    headers: {
        Authorization: authToken
    },
    data: { //! Take note of the `data` keyword. This is the request body.
        key: value,
        ... //! more `key: value` pairs as desired.
    } 
}

axios.delete(url, config)

希望这能帮助到某人！

- ThunderBird

---

谢谢，我在我的NestJS HttpService的delete方法中使用它：this.httpService.delete(apiUrl, { headers: headersRequest, data: deleteBody }) - shanti

Answer 8

我有同样的问题，我像这样解决它：

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

- ronara

Answer 9

如果我们有：

myData = { field1: val1, field2: val2 }

我们可以将数据(JSON)转换为字符串, 然后将其作为参数发送到后端：

axios.delete("http://localhost:[YOUR PORT]/api/delete/" + JSON.stringify(myData), 
     { headers: { 'authorization': localStorage.getItem('token') } }
 )

在服务器端，我们获取我们的对象：

app.delete("/api/delete/:dataFromFrontEnd", requireAuth, (req, res) => {
    // we could get our object back:
    const myData = JSON.parse(req.params.dataFromFrontEnd)
 })

注意: 2月14日15:49由x4wiz给出的答案比我的更准确! 我的解决方案没有"body"（在某些情况下可能有用...）

更新: 当对象的重量达到540字节（15 * UUIDv4）及以上时，我的解决方案是不起作用的（请查看文档以获取确切值）。"x4wiz" (以及其他许多人)的解决方案要好得多。那么，为什么不删除我的答案呢？因为它可以工作，而且大多数时候，它带给我最多的 Stackoverflow 声望;-)

- user14348713

Answer 10

我找到了一个可行的方法：

axios
      .delete(URL, {
        params: { id: 'IDDataBase'},
        headers: {
          token: 'TOKEN',
        },
      }) 
      .then(function (response) {
        
      })
      .catch(function (error) {
        console.log(error);
      });

我也希望这对您有用。

- Chacky Dev