Getting cookie.load('csrftoken') undefined in react

Question

I am sending axios.put request on my Django back-end (DRF). I am using react. GET request seems to work nicely. This is my code:

const options =  {headers: 
  {"X-CSRFToken": cookie.load('csrftoken')
}}

axios
.put(`/api/shippers/${values.id}/`,values, options)
.then(res => {
  console.log(res)
  return res
})
.catch(err => {
  console.log(err);
})

But all I get in cookie.load('csrftoken') is undefined. Even though csrftoken is set on my browser cookies.

Answer 1

I solved this mystery by myself. Actually, I could not able to read csrftoken cookie from the browser using react cookie.load function. Because, in my Django back-end CSRF_COOKIE_HTTPONLY is set to True. According to the documentation, if this value is set to True, you can not read the csrftoken value using JavaScript. The workaround was to set this value to False and now cookie.load working fine.

The similar is the case with session_id, that you must set SESSION_COOKIE_HTTPONLY to False.