带有 body 和 headers 的 Axios 删除请求？

Question

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

为此我需要 headers:

headers: {
  'Authorization': ...
}

而body由

组成

var payload = {
    "username": ..
}

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

我一直在尝试这样发送：

axios.delete(URL, payload, header);

甚至

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

但似乎没有任何效果...

有人可以告诉我是否可以（我假设是）发送包含 headers 和 body 的 DELETE 请求以及如何发送？

提前致谢！

Answer 1

axios.delete 确实支持请求 body。它接受两个参数：url 和可选配置。您可以使用 config.data 来设置请求 body 和 headers 如下：

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

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

Answer 2

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 3

要通过 axios 发送带有一些 headers 的 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 body，其他一些次（当可能不需要时）你只需将 headers 作为第二个参数传递。

然而，假设您需要发送一个没有 HTTP body 的 HTTP POST 请求，那么您需要将 undefined 作为第二个参数传递。

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

第二个参数有时是 HTTP body 而有时是 axios 的整个 config object 之间的这种混淆是由于 HTTP 规则如何得到实施。有时 HTTP body 不需要将 HTTP 调用视为有效。

Answer 4

这里简要总结了使用 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 5

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

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

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

Answer 6

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

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

Answer 7

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

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

对我有用。

Answer 8

所以经过多次尝试，我发现它有效。

请按顺序排列这很重要，否则将无法使用

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

Answer 9

实际上，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 10

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

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

我希望这对你也有用。

Answer 11

我尝试了以上所有方法，但都不适合我。我最终只是使用 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 12

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

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

如果我们有：

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)
 })

注意： 来自“x4wiz”的答案于 2 月 14 日 15:49 比我的问题更准确！我的解决方案是没有“正文”（在某些情况下可能会有所帮助...）

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

Answer 14

与 axios 无关，但可能会帮助人们解决他们正在寻找的问题。 PHP 在执行删除调用时不解析 post 数据。 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 中获取有关删除调用的 post 数据，请使用：

file_get_contents('php://input');

Answer 15

axios.post('/myentity/839', {
  _method: 'DELETE'
})
.then( response => {
  //handle success
})
.catch( error => {
   //handle failure
});

感谢： https://www.mikehealy.com.au/deleting-with-axios-and-laravel/

带有 body 和 headers 的 Axios 删除请求？

Axios Delete request with body and headers?

javascript

http

http-delete

reactjs

axios

关键要点