Can't set headers for DELETE method

[genomics-geek]

I create an instance of axios:
const api = axios.create({ baseURL: process.env.BASE_URL, timeout: 1000, });

I am able to set the header for POST:
api.defaults.headers.post['X-CSRFToken'] = cookie.csrftoken;

However, if I try to set the header for DELETE:
api.defaults.headers.delete['X-CSRFToken'] = cookie.csrftoken;

I get the following error:
Cannot set property 'X-CSRFToken' of undefined

Is this expected behavior?

[nickuraltsev]

Fixed via d963368

[tangshuang]

Hi @nickuraltsev , I am facing the same problem now. My case:

axios.defaults.headers.common['X-Request-Id'] = window.REQUEST_ID

axios.delete(url)

X-Request-Id is not sent when using delete method.
Could you have a look?

[ahlusar1989]

@tangshuang Do you mind demonstrating the full steps to reproduce this.

[tangshuang]

Well, I found the reason.
DELETE method request should not be sent with non-emtpy body. When I sent a delete request I set the request body to be null, which contains contect in fact. After I remove the data option in config, it works correctly.
Thanks @ahlusar1989 .

[dnieh]

You could in theory use the axios.delete method correctly and pass in data with the following:

const globalAxiosConfig = {
  headers: {
    'X-CSRFToken': 'add csrf token here',
  },
}

async function axiosDelete(url, data = {}) {
  const axiosConfig = {
    ...globalAxiosConfig,
    ...data,
  }
  return await axios.delete(url, axiosConfig)
}

However, even with data present, Axios seems to ignore it in the request which makes sense since passing back data on a HTTP DELETE request was not defined in the HTTP 1.1 spec: https://tools.ietf.org/html/draft-ietf-httpbis-p2-semantics-19#section-6.7

Bodies on DELETE requests have no defined semantics. Note that sending a body on a DELETE request might cause some existing implementations to reject the request

[moeinrahimi]

in my case doing delete with axios in below method doesn't send header.

       let {data} = await axios.delete(baseUrl+`/likepost`,
       {
         postId:postId
       },{headers:{Cookie:`sid=${cookie}`}})

but this way it's working correctly

  let {data} = await axios({
        url:baseUrl+`/likepost`,
        method:'delete',
        data : {postId},
        headers:{Cookie:`sid=${cookie}`}
      })

[tangshuang]

@moeinrahimi Are you sure? You mean you can post data with DELETE method?
Have you ever tried adding a new header option, like X-Request-Id.

[sajidkhaki]

axios.delete({
url: '/system/ABC/delete/' + selectedId,
headers: {'Authorization': 'Bearer ' + token},
withCredentials: true
}).then(function (response) {.....................

i try to use csrf in delete , but i am getting this error in node.js

DELETE http://localhost:3131/system/ABC/delete/473TL095G3x-HpugwipBP0RAMmyer5cPDafrNg0 403 (Forbidden)

[vipulDessai]

yes, even I'm facing the same issue if I'm using the axios.delete with config withCredentials: true and CORS enabled on the backend server with a different domain,

All though I'm explicitly setting the cookies in response headers which I can see in network tab, these are not sent later when I make axios.delete request

axios.delete(
	process.env.GATSBY_URL_DELETE_FILE, 
	{
		data: {
			fileName,
			jwt,
		},
	},
	{ withCredentials: true }
)
.then(res => {
	return res.text()
})
.catch(error => {
	// handle error from aws lambda
	console.log(error)
})

Note: also checked with JS native XMLHttpRequest, it's not supported to set xhr.withCredentials = true; with CORS, so its obvious that it's not supported in Axios