使用 apollo 客户端和 graphene-django 配置 CSRF 令牌

Question

我无法在 authlink 标头中正确设置 csrf 令牌。

const authLink = setContext((_, { headers }) => {
    const token = localStorage.getItem(AUTH_TOKEN)
  return {
    "headers": {
      'X-CSRFToken' : getCookie('csrftoken'),
      "Authorization": token ? `JWT ${token}` : '',
      ...headers,
    },
  };
});

从浏览器 devtools 中发送的请求看起来不错，正如您在底部看到的那样，csrf 令牌看起来正确吗？我清除了我的浏览器数据以确保它不是旧的，但我不确定这是否有效。

accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Authorization
Connection: keep-alive
Content-Length: 505
content-type: application/json
Host: localhost:8000
Origin: http://localhost:3000
Referer: http://localhost:3000/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36 Edg/89.0.774.63
X-CSRFToken: LsV83sz3Rb5RRIlNcRN3AgnniodwsSMpvXwMGquPGRbvoPpISfKv6MBEf86rVzVp

我通过该网站得到的错误是 CSRF 验证失败。请求中止

我的 django 服务器显示 禁止（未设置 CSRF cookie。）

Answer 1

您是否尝试过安装 corsheaders？或者你确定你有这个功能

function getCookie(name) {
            var cookieValue = null;
            if (document.cookie && document.cookie !== '') {
                var cookies = document.cookie.split(';');
                for (var i = 0; i < cookies.length; i++) {
                    var cookie = cookies[i].trim();
                    // Does this cookie string begin with the name we want?
                    if (cookie.substring(0, name.length + 1) === (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }