React Axios: passing data in Delete method

user_16791657 0
Viewed 98

I would like to have a better understanding of passing data in an Axios Delete request. Here, what I have in the backend for the delete request is in order to delete a user you need to give a specific password. So in the frontend, I need to pass the entered password in "axios.delete" method.

And, I always get this 403 forbidden error with my first approach as below ( that is the way of passing the password is the same as the way of passing the updating data with axios.post or axios.patch method):

export function deleteUser(id, password){
    const csrfToken = getCookie('csrftoken');
    return axios.delete('/users/' + id + '/', {password: password}, {headers: {'X-CSRFToken': csrfToken}})
}

Luckily, I could finally fix that error by the following approach:

export function deleteUser(id, password){
    const csrfToken = getCookie('csrftoken');
    return axios.delete('/users/' + id + '/', {headers: {'X-CSRFToken': csrfToken}, data: {password: password}})
}

However, I do not clearly understand why axios.delete('/users/' + id + '/', {headers: {'X-CSRFToken': csrfToken}, data: {password: password}}) works fine but axios.delete('/users/' + id + '/', {password: password}, {headers: {'X-CSRFToken': csrfToken}}) not passing the password data correctly (which causes 403 error) while this approach still works properly for axios.post or axios.patch. Can anyone explaining to me more about this problem?

axios reactjs
1 Answers

.delete does not support data parameter as a second argument like .post and .patch do. That's all there is to it. As for why, according to HTTP spec POST, PATCH and PUT methods require body in the request. For DELETE it is optional. That's most likely why axios authors designed their API that way.

user_17080940
Related