Django，react & fetch -在post请求时提交CSRF令牌

Question

我正在创建一个带有Django (Rest)和模板的webapp，这些模板是由react组件添加的。这些反应组件是连接在一起的toDjango_restframework应用程序接口。

“get”请求工作得很好，但到目前为止我还不能让post请求工作。问题似乎是围绕着：

{detail: "CSRF Failed: CSRF token missing or incorrect."}

以下是我采取的步骤：

1-我在我的settings.py中启用了CSRF_USE_SESSIONS = True

2-我已经在我的django模板中添加了CSRF标签，如下所示(我使用django webpack-loader，因此有另一个标签)

<div id="create_root"></div>
{% render_bundle 'main_create_assessment' 'js' %}
{% csrf_token %}

3-我添加了一个从cookie获取CSRF的函数

function getCookie(name) {
    if (!document.cookie) {
      return null;
    }
    const token = document.cookie.split(';')
      .map(c => c.trim())
      .filter(c => c.startsWith(name + '='));

    if (token.length === 0) {
      return null;
    }
    return decodeURIComponent(token[0].split('=')[1]);
  }

  const csrftoken = getCookie('csrftoken')
  console.log(csrftoken)

( 'console.log‘语句显示'csrftoken’变量被赋予了正确的值，但是post请求在403 /缺失/不正确的csrf令牌错误中一直失败。)

4-我已经将csrf信息添加到post请求的头部，如下所示：

  fetch(url, {
    credentials: 'include',
    method: 'POST',
    mode: 'same-origin',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
      'X-CSRFToken': csrftoken
    },
    body: JSON.stringify({
      title: this.state.title
    })
   })
  }

同样，我的console.log语句似乎表明我提供了正确的令牌，但是403错误仍然存在。有人能告诉我我做错了什么吗？