Search code examples
javascriptreactjshttpaxioshttp-delete

Axios - DELETE Request With Request Body and Headers?


I'm using Axios while programming 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 it's possible (I presume it is) to send a DELETE request with both headers and body and how to do so?


Solution

  • 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