如何在"Axios.interceptors.request"的配置中获取Cookies的"csrftoken"? [英] How can I get the Cookies' `csrftoken` in `Axios.interceptors.request`'s config?

问题描述

如何在Axios.interceptors.request的配置中获取Cookies的csrftoken?

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

在Axios.interceptors.request的配置中，我无法获取Cookies的csrftoken:Cookies.get('csrftoken').

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

我的AxiosConfig代码如下:

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

---

编辑-1

Cookie中有csrftoken.

编辑2

在cookie中，也没有csrftoken.

And in the cookie, there is no csrftoken too.

编辑3

如果在控制台中获得document.cookie，则将获得"": ```

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

document.cookie
< " ```

document.cookie
< "" ```

---

edit-4

:

INSTALLED_APPS:

INSTALLED_APPS:

...
'corsheaders', 

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

我不确定rest_auth和allauth是否会影响csrftoken.

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

推荐答案

首先，始终确保cookie未被标记为

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

如果是，则您的javascript代码将无法读取/修改其内容.

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

您可以在浏览器中检查Cookie选项卡，然后查看它是否可读.

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

在您的情况下，django不应将标志设置为

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:

• 当您在拦截器中接收配置数据时，配置对象可能尚未填充数据.因此，设置config.headers = ...;可能会触发错误.

• 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.

确保您输入:

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

在设置headers之前，不会触发'config.headers未定义'.

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

• 要直接读取cookie，请按照默认步骤将csrf值存储在隐藏的input中.

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

在这种情况下，由于您无需读取cookie，因此将其设置为httpOnly将是巨大的加.

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

这篇关于如何在"Axios.interceptors.request"的配置中获取Cookies的"csrftoken"?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！