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

Question

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

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')。

我的 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

Cookie中有csrftoken

---

edit-2

并且在cookie中，也没有csrftoken。

---

edit-3

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

document.cookie
< "" ```

---

edit-4

在我的 Django 后端，settings.py:

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。

Answer 1

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

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

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

但在您的情况下，django 不应将标志设置为 httpOnly 作为 docs描述如何直接从 cookie 中读取 javascript 中的值。

我可以根据经验指出一些事情:

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

确保你写:

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

在设置 headers 之前，不会触发 'config.headers is undefined'。

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

你可以这样做(语法可能不正确):

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

然后在拦截器中发送 token :

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

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