Axios使用正文和标题删除请求？

Question

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

为此,我需要标题:

headers: {
  'Authorization': ...
}

而身体是由

var payload = {
    "username": ..
}

我一直在网络中搜索,只发现DELETE方法需要一个"param"并且不接受"数据".

我一直试图像这样发送它:

axios.delete(URL, payload, header);

甚至

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

但似乎没有任何作用......

有人可以告诉我它是否可能(我认为是)发送带有标题和正文的DELETE请求以及如何执行此操作？

先感谢您!

Answer 1

axiox.delete确实支持请求正文.它接受两个参数:url和optional config.您可以使用config.data设置响应正文,如下所示:

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

请参阅此处 - https://github.com/axios/axios/issues/897

Answer 2

以下是使用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
)

• DELETE

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

关键带走

• get请求可选地需要一个params键来正确设置查询参数
• delete具有正文的请求需要在data密钥下设置

Answer 3

因此，经过多次尝试，我发现它可以正常工作。

请遵循订单顺序，这非常重要，否则将无法正常工作

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

Answer 4

对于删除，您需要按照以下操作

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

它对我有用。

Answer 5

我遇到了同样的问题，我是这样解决的：

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

Answer 6

实际上，axios.delete支持请求正文。
它接受两个参数： aURL和一个 optional 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)

我希望这可以帮助别人！

Answer 7

轴距。删除就是传递一个URL和一个可选配置。

axios.delete（url [，config]）

可用于配置的字段可以包括标题。

这样就可以将API调用编写为：

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

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

Answer 8

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

"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

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 ”的答案比我的更准确！我的解决方案是没有“身体”（在某些情况下可能会有所帮助......）

更新：当对象的重量为 540 字节 (15*UUIDv4) 及更多时，我的解决方案不起作用（请检查文档以获取确切的值）。“ x4wiz ”（以及上面的许多其他解决方案）的解决方案要好得多。那么，为什么不删除我的答案呢？因为它确实有效，但最重要的是，它为我带来了 Stackoverflow 的大部分声誉；-)

Answer 10

Axios DELETE 请求确实支持与 POST 请求类似的功能，但格式不同。

DELETE 请求负载示例代码：

axios.delete(url, { data: { hello: "world" }, headers: { "Authorization": "Bearer_token_here" } });

POST 请求负载示例代码：

axios.post(url, { hello: "world" }, { headers: { "Authorization": "Bearer_token_here" } });

注意到{ hello: "world" }以不同的方式配置，但两者执行相同的功能。