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

我怎样才能得到饼干csrftoken in Axios.interceptors.request的配置？

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的配置我无法获取 Cookiescsrftoken: Cookies.get('csrftoken').

我的 AxiosConfig 代码如下：

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

有的是csrftoken在 Cookie 中。

edit-2

而在cookie中，没有csrftoken too.

edit-3

如果我得到document.cookie在控制台中，我会得到"": ```

文档.cookie

edit-4

在我的 Django 后端中，settings.py:

已安装的应用程序：

...
'corsheaders', 

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

我不确定是否rest_auth and allauth将影响csrftoken.

首先，始终确保 cookie 没有被标记为httpOnly https://www.owasp.org/index.php/HttpOnly.

如果是的话，你的javascript代码将无法读取/修改其内容。

您可以检查浏览器中的cookies选项卡，您将看到它是否可读。

但就你而言，django不应该将标志设置为httpOnly as the docs https://docs.djangoproject.com/en/2.0/ref/csrf/#acquiring-the-token-if-csrf-use-sessions-is-false描述如何读取其中的值javascript直接来自cookie。

根据我的经验，我可以指出几点：

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

确保你写的是：

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

在设置之前headers so no 'config.headers 未定义'将被触发。

• 或者直接读取 cookie，存储csrf隐藏的值input按照默认程序。

你可以这样做（语法可能不正确）：

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

然后在拦截器中发送令牌：

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

在这种情况下，由于您不需要读取 cookie，因此它将是巨大的优势将其设置为httpOnly.