reactjs - Django，React＆Fetch-在发布请求后提交CSRF token

Question

我正在使用Django(Rest)和由react组件添加的模板创建一个webapp。这些reactcomponents连接到Django_restframework API。

'GET'请求工作正常，但是到目前为止，我还无法使发布请求生效。问题似乎集中在周围:

{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'变量已分配了正确的值，但是发布请求因403 /缺少/错误的csrf token 错误而不断失败。)

4-我已将csrf信息添加到发布请求的 header 中，如下所示:

  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语句似乎表明我提供了正确的 token ，但是403错误仍然持续存在。有人可以启发我我做错了什么吗？

Answer 1

我设法解决了我的问题!

我的解决方法是正确的，但是我必须从settings.py中删除CSRF_USE_SESSIONS = True
然后从模板中删除{% csrf_token %}标记。

这些更改后，POST请求将生效。