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

问题描述

如何在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 "":```

---

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未被标记为 httpOnly .

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不应将标志设置为文档描述如何直接从Cookie中读取javascript中的值.

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"?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！