Asfourhundred
Asfourhundred

Reputation: 3363

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?

Upvotes: 304

Views: 575438

Answers (20)

Yogesh Kumar
Yogesh Kumar

Reputation: 111

After decades, I found this working

axios.delete(url,{data: payload})

Upvotes: 10

Prokash Dev
Prokash Dev

Reputation: 77

this code is generated from post man and it's perfectly work for delete api request with body.

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

Upvotes: 4

Jerry Chong
Jerry Chong

Reputation: 9240

Axios DELETE request does supports similar what POST request does, but comes in different formats.

DELETE request payload sample code:

axios.delete(url, { data: { hello: "world" }, headers: { "Authorization": "Bearer_token_here" } });

POST request payload sample code:

axios.post(url, { hello: "world" }, { headers: { "Authorization": "Bearer_token_here" } });

Noticed that { hello: "world" } is configured in different ways, but both performs same functions.

Upvotes: 10

tarzen chugh
tarzen chugh

Reputation: 11257

axios.delete does supports both request body and headers.

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

Upvotes: 255

Soumik Chakraborty
Soumik Chakraborty

Reputation: 253

Use {data: {key: value}} JSON object, the example code snippet is given below:

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

Upvotes: 0

Jk041
Jk041

Reputation: 992

For Axios DELETE Request, you need to include request payload and headers like this under one JSON object:

axios.delete(URL, {
  headers: {
    'Authorization': ...
  }, 
  data: {
    "username": ...
  }
})

Why can't I do it easily as I do similar to POST requests?

Looking at the Axios documentation, we see that the methods for .get, .post... have a different signature:

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

Notice how only post, patch and put have the data parameter. This is because these methods are the ones that usually include a body.

Looking at RFC7231, we see that a DELETE request is not expected to have a body; if you include a body, what it will mean is not defined in the spec, and servers are not expected to understand it.

A payload within a DELETE request message has no defined semantics; sending a payload body on a DELETE request might cause some existing implementations to reject the request.

(From the 5th paragraph here).

In this case, if you are also in control of the server, you could decide to accept this body in the request and give it whatever semantics you want. May be you are working with somebody else's server, and they expect this body.

Because DELETE requests with bodies are not defined in the specs, and because they're not common, Axios didn't include them in those method aliases. But, because they're possible, you can do it, just takes a bit more effort.

I'd argue that it would be more conventional to include the information on the url, so you'd do:

axios.delete(
  `https://example.com/user/${encodeURIComponent(username}`, 
  { headers: ... }
)

or, if you want to be able to delete the user using different criteria (sometimes by username, or by email, or by id...)

axios.delete(
  `https://example.com/user?username=${encodeURIComponent(username)}`, 
  { headers: ... }
)

Upvotes: 3

user14348713
user14348713

Reputation:

If we have:

myData = { field1: val1, field2: val2 }

We could transform the data (JSON) into a string then send it, as a parameter, toward the backend:

axios.delete("http://localhost:[YOUR PORT]/api/delete/" + JSON.stringify(myData), 
     { headers: { 'authorization': localStorage.getItem('token') } }
 )

In the server side, we get our object back:

app.delete("/api/delete/:dataFromFrontEnd", requireAuth, (req, res) => {
    // we could get our object back:
    const myData = JSON.parse(req.params.dataFromFrontEnd)
 })

Note: the answer from "x4wiz" on Feb 14 at 15:49 is more accurate to the question than mine! My solution is without the "body" (it could be helpful in some situation...)

Update: my solution is NOT working when the object has the weight of 540 Bytes (15*UUIDv4) and more (please, check the documentation for the exact value). The solution of "x4wiz" (and many others above) is way better. So, why not delete my answer? Because, it works, but mostly, it brings me most of my Stackoverflow's reputation ;-)

Upvotes: 5

Syed Mobarak
Syed Mobarak

Reputation: 69

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

Thanks to: https://www.mikehealy.com.au/deleting-with-axios-and-laravel/

Upvotes: 1

Sjaak Wish
Sjaak Wish

Reputation: 475

Not realated to axios but might help people tackle the problem they are looking for. PHP doesn't parse post data when preforming a delete call. Axios delete can send body content with a request. example:

//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
(        
)

to get post data on delete call in php use:

file_get_contents('php://input'); 

Upvotes: 1

x4wiz
x4wiz

Reputation: 171

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

Upvotes: 17

Josh
Josh

Reputation: 2498

I tried all of the above which did not work for me. I ended up just going with PUT (inspiration found here) and just changed my server side logic to perform a delete on this url call. (django rest framework function override).

e.g.

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

Upvotes: 0

Van_Paitin
Van_Paitin

Reputation: 4248

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

Upvotes: 225

Chacky Dev
Chacky Dev

Reputation: 61

i found a way that's works:

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

I hope this work for you too.

Upvotes: 4

ThunderBird
ThunderBird

Reputation: 303

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!

Upvotes: 10

Hemantkumar Gaikwad
Hemantkumar Gaikwad

Reputation: 721

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

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

It worked for me.

Upvotes: 14

vishu2124
vishu2124

Reputation: 4631

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

Upvotes: 421

ronara
ronara

Reputation: 366

I had the same issue I solved it like that:

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

Upvotes: 9

jimijuu omastar
jimijuu omastar

Reputation: 117

I encountered the same problem... I solved it by creating a custom axios instance. and using that to make a authenticated delete request..

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

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

Upvotes: 1

TPPZ
TPPZ

Reputation: 4901

To send an HTTP DELETE with some headers via axios I've done this:

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

The axios syntax for different HTTP verbs (GET, POST, PUT, DELETE) is tricky because sometimes the 2nd parameter is supposed to be the HTTP body, some other times (when it might not be needed) you just pass the headers as the 2nd parameter.

However let's say you need to send an HTTP POST request without an HTTP body, then you need to pass undefined as the 2nd parameter.

Bare in mind that according to the definition of the configuration object (https://github.com/axios/axios#request-config) you can still pass an HTTP body in the HTTP call via the data field when calling axios.delete, however for the HTTP DELETE verb it will be ignored.

This confusion between the 2nd parameter being sometimes the HTTP body and some other time the whole config object for axios is due to how the HTTP rules have been implemented. Sometimes an HTTP body is not needed for an HTTP call to be considered valid.

Upvotes: 3

Oluwafemi Sule
Oluwafemi Sule

Reputation: 38982

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

Upvotes: 26

Related Questions