How can I get the Cookies' `csrftoken` in `Axios.interceptors.request`'s config?

问题

How can I get the Cookies' csrftoken in Axios.interceptors.request's config?

Axios.interceptors.request.use(
  config => {

    if (
      config.method === "post" ||
      config.method === "put" ||
      config.method === "delete"||
      config.method === "get"
    ) {

    }


    if (Cookies.get('token')!==undefined) {   
      config.headers['Authorization']= 'Token '+Cookies.get('token');
    }
    // there I try to get the `csrftoken` in the Cookies, but I can not get.
    if (Cookies.get('csrftoken')!==undefined) {   

      config.headers['x-csrftoken']= Cookies.get('csrftoken');  // 'CSRFToken'
    }

    return config;
  },
  error => {  
    return Promise.reject(error.data.error.message);
  }
);

In the Axios.interceptors.request's config I can not get Cookies's csrftoken: Cookies.get('csrftoken').

my AxiosConfig code is bellow:

AxiosConfig:{
    baseURL: 'http://10.10.10.105:8001/',

    responseType: "json",
    withCredentials: true,  // there will send the Cookie (with it there are: sessionid, csrftoken)

    xsrfCookieName: 'csrftoken',  // default: XSRF-TOKEN
    xsrfHeaderName: 'x-csrftoken',   // default: X-XSRF-TOKEN
    headers: {
      "Content-Type": "application/json;charset=utf-8"
    }
  }

edit-1

There is the csrftoken in the Cookie.

edit-2

And in the cookie, there is no csrftoken too.

edit-3

if I get the document.cookie in console, I will get the "": ```

document.cookie
< "" ```

edit-4

in my Django backend, the settings.py:

INSTALLED_APPS:

...
'corsheaders', 

'rest_framework',
'rest_framework.authtoken',
'rest_framework_docs',   
'rest_auth',
'allauth',
'allauth.account',
'allauth.socialaccount',
'rest_auth.registration',
...

I am not sure whether the rest_auth and allauth will affect the csrftoken.

回答1:

First of all, always make sure that the cookie is not flagged as httpOnly.

If it is, your javascript code won't be able to read / modify its content.

You can check the cookies tab in your browser and you will see whether it's readable or not.

In in your case though, django shouldn't be setting the flag as httpOnly as the docs describe how to read the value in javascript directly from the cookie.

A few things I can point out by experience:

The config object might not yet be filled with the data when you receive it within an interceptor. Therefore setting config.headers = ...; might trigger an error.

Make sure you write:

config.headers = config.headers || {};

before setting the headers so no 'config.headers is undefined' will be triggered.

Alternatively to directly reading the cookie, store the csrf value inside an hidden input as per default procedure.

You can do something like this (syntax might be incorrect):

<input type="hidden"
   name="csrftoken"
   value="{% csrf_token %}"/>
</div>

and then send the token within the interceptor with:

config.headers['x-csrftoken'] = document.querySelector('input[name="csrftoken"]').value;

In such case, since you do not need to read the cookie, it would be a huge plus to set it as httpOnly.

来源：https://stackoverflow.com/questions/49312473/how-can-i-get-the-cookies-csrftoken-in-axios-interceptors-requests-config

标签

javascript

axios