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

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

headers: {
  'Authorization': ...
}

而身体是由

var payload = {
    "username": ..
}

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

我一直想这样发送

axios.delete(URL, payload, header);

甚至

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

但似乎什么都不管用……

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


delete同时支持请求正文和请求头。

它接受两个参数:url和可选配置。您可以使用配置。设置请求正文和请求头的数据如下:

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

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


delete传递一个url和一个可选配置。

axios.delete (url(配置)

配置可用的字段可以包括头信息。

这使得API调用可以写成:

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

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

要通过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)的定义,在调用axios.delete时,仍然可以通过data字段在HTTP调用中传递HTTP主体,但是对于HTTP DELETE谓词,它将被忽略。

第二个参数有时是HTTP主体,有时是axios的整个配置对象,这种混淆是由于HTTP规则是如何实现的。有时HTTP调用被认为是有效的,并不需要HTTP主体。


下面是使用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(url, {data:{username:"user", password:"pass"}, headers:{Authorization: "token"}})

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

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

这对我很管用。


所以在尝试了几次之后,我发现它起作用了。

请按顺序做,这很重要,否则不行

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

实际上,axios.delete支持请求体。 它接受两个参数:一个URL和一个可选配置。这是……

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)

我希望这能帮助到一些人!


我找到了一个有效的方法:

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

我希望这对你也有用。


我尝试了以上所有的方法,但对我都不起作用。我最终只是使用PUT(灵感来自这里),只是改变了我的服务器端逻辑,对这个url调用执行删除。(django rest框架函数重写)。

e.g.

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

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

"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


如果我们有:

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的大部分声誉;-)


与axios无关,但可能帮助人们解决他们正在寻找的问题。PHP在执行delete调用时不解析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'); 

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

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


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

使用{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 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"}以不同的方式配置,但都执行相同的功能。


此代码是由post man生成的,它可以很好地处理带有body的删除API请求。

var data = JSON.stringify({"profile":"false","cover":"true"});

var config = {
  method: 'delete',
  url: 'https://api.fox.com/dev/user/image',
  headers: { 
    'Authorization': 'Bearer token', 
  },
  data : data
};

axios(config)
.then(function (response) {
  console.log(JSON.stringify(response.data));
})
.catch(function (error) {
  console.log(error);
});