Question

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

为此，我需要标题：

headers: {
  'Authorization': ...
}

身体由

组成

var payload = {
    "username": ..
}

我一直在互联网上进行搜索，但发现DELETE方法需要一个“ param”并且不接受任何“ data”。

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

axios.delete(URL, payload, header);

甚至

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

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

有人可以告诉我是否可以发送带有标头和正文的DELETE请求以及如何发送？

提前谢谢！

Answer 1

axiox.delete确实支持请求正文。它接受两个参数：URL和可选配置。您可以使用config.data设置响应正文，如下所示：

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

在这里查看-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和可选的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 4

axios。 删除为passed a url and an optional configuration。

axios.delete（url [，config]）

字段available to the configuration can include the headers。

这样可以使API调用编写为：

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

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

Answer 5

我同样遇到了这样的问题：

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

Answer 6

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

"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 7

要通过axios发送带有某些标头的HTTP DELETE，我已经这样做了：

  const deleteUrl = "http//foo.bar.baz";
  const httpReqHeaders = {
    'Authorization': token,
    'Content-Type': 'application/json'
  };
  // check the structure here: https://github.com/axios/axios#request-config
  const axiosConfigObject = {headers: httpReqHeaders}; 

  axios.delete(deleteUrl, axiosConfigObject);

用于不同HTTP动词（GET，POST，PUT，DELETE）的axios语法很棘手，因为有时第二个参数应该是HTTP正文，而在其他时候（可能不需要）只需将标头作为第二个参数即可。

但是，假设您需要发送不带HTTP正文的HTTP POST请求，那么您需要传递undefined作为第二个参数。

请记住，根据配置对象（https://github.com/axios/axios#request-config的定义，您仍然可以在调用data时通过axios.delete字段在HTTP调用中传递HTTP正文。对于HTTP DELETE动词，它将被忽略。

第二个参数有时是HTTP正文，而其他时候config的整个axios对象之间的这种混淆是由于HTTP规则的实现方式引起的。有时不需要HTTP主体即可将HTTP调用视为有效。

Answer 8

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

请按照订单顺序，这很重要，否则将无法正常工作

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

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) => {
    const myData = JSON.parse(req.params.dataFromFrontEnd)
    // we could get our object back:
    //      myData = { field1: val1, field2: val2 }
 })

Answer 10

我遇到了同样的问题... 我通过创建自定义axios实例解决了该问题。并使用它发出经过身份验证的删除请求。

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

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

Answer 11

对于删除，您需要按照以下说明进行操作

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

对我有用。

Answer 12

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

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

我希望这项工作对您也有用。

Answer 13

我尝试了以上所有不适用于我的方法。我最后只是使用PUT（发现here的灵感），只是更改了服务器端逻辑以对该URL调用执行删除。（django rest框架功能覆盖）。

例如

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

Answer 14

与 axios 无关，但可能会帮助人们解决他们正在寻找的问题。 PHP 在执行删除调用时不解析发布数据。 axios delete 可以随请求发送正文内容。例子：

//post example
let url = 'http://local.test/test/test.php';
let formData = new FormData();
formData.append('asdf', 'asdf');
formData.append('test', 'test');

axios({
    url: url,
    method: 'post',
    data: formData,
}).then(function (response) {
    console.log(response);
})

result: $_POST Array
(
    [asdf] => asdf
    [test] => test
)


// delete example
axios({
    url: url,
    method: 'delete',
    data: formData,
}).then(function (response) {
    console.log(response);
})

result: $_POST Array
(        
)

在php使用中获取删除调用的发布数据：

file_get_contents('php://input');

Axios删除带有正文和标题的请求吗？

14 个答案: