Axios Delete request with body and headers?

Question

I'm using Axios while programing in ReactJS and I pretend to send a DELETE request to my server.

To do so I need the headers:

headers: {
  'Authorization': ...
}

and the body is composed of

var payload = {
    "username": ..
}

I've been searching in the inter webs and only found that the DELETE method requires a "param" and accepts no "data".

I've been trying to send it like so:

axios.delete(URL, payload, header);

or even

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

But nothing seems to work...

Can someone tell me if its possible (I presume it is) to send a DELETE request with both headers and body and how to do so ?

Thank you in advance!

Answer 1

So after a number of tries, I found it working.

Please follow the order sequence it's very important else it won't work

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

Answer 2

axios.delete does support a request body. It accepts two parameters: url and optional config. You can use config.data to set the request body and headers as follows:

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

See here - https://github.com/axios/axios/issues/897

Answer 3

Here is a brief summary of the formats required to send various http verbs with axios:

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

Key take aways

• get requests optionally need a params key to properly set query parameters
• delete requests with a body need it to be set under a data key

Answer 4

axios.delete is passed a url and an optional configuration.

axios.delete(url[, config])

The fields available to the configuration can include the headers.

This makes it so that the API call can be written as:

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

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

Answer 5

For those who tried everything above and still don't see the payload with the request - make sure you have:

"axios": "^0.21.1" (not 0.20.0)

Then, the above solutions work

axios.delete("URL", {
      headers: {
        Authorization: `Bearer ${token}`,
      },
      data: {
        var1: "var1",
        var2: "var2"
      },
    })

You can access the payload with

req.body.var1, req.body.var2

Here's the issue:

https://github.com/axios/axios/issues/3335

Answer 6

For Delete, you will need to do as per the following

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

It worked for me.

Answer 7

I had the same issue I solved it like that:

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

Answer 8

Actually, axios.delete supports a request body.
It accepts two parameters: a URL and an optional config. That is...

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

You can do the following to set the response body for the delete request:

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)

I hope this helps someone!