reactjs - React 和 Django 之间的 CRSF 令牌？

Question

我一直在尝试执行一个简单的端点，我从我的前端 React 中使用 Django 提供。这是一个 POST 请求，用于检查 URL 是否存在。这只是一个演示，因此我可以熟悉完整的堆栈过程。问题是任何尝试在 React 之外测试此端点的尝试，我都会Forbidden: CSRF token missing or incorrect在我的 Django 控制台中收到错误日志，同时在 React 中我只是无法获取。这是我所拥有的：

相关代码

视图.py

def check_url(request, url):
    headers = {"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36"}
    r = requests.get(url, headers=headers)
    return HttpResponse(status=r.status_code)

组件.jsx

  //django crsf token for api
  const 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 = $.trim(cookies[i]);
        if (cookie.substring(0, name.length + 1) === name + "=") {
          cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
          break;
        }
      }
    }
    return cookieValue;
  };

  //handles making api call with the cookie
  const APIcall = () => {
    var csrftoken = getCookie("csrftoken");
    fetch("http://127.0.0.1:8000/check_url/", {
      credentials: "include",
      method: "POST",
      mode: "same-origin",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        "X-CSRFToken": csrftoken,
      },
      body: {
        "url":
          "https://stackoverflow.com/questions/50732815/how-to-use-csrf-token-in-django-restful-api-and-react",
      },
    });
  };

输出

使用 React 的每个函数调用的输出都Unhandled Rejection (TypeError): Failed to fetch没有 Django 中的尝试日志。

每次使用https://reqbin.com/调用的输出是403 (Forbidden)和 Django 中的日志。

我试过的

1. 通过stackoverflow仔细阅读并找到了一些有用的链接，这些链接给了我一些像这里这样的代码，但它仍然没有响应
2. 添加@ensure_csrf_cookie到我的视图中，但这没有任何效果

这就是我自己走了多远，有太多的不确定性让我无法真正前进。一方面，如果https://reqbin.com/能够连接，views.py 中的代码似乎可以工作，但问题是令牌。因为我的 React 代码是唯一对服务器没有任何影响的东西，所以我的 fetch 可能是错误的。我只是不知道它怎么错了。感谢您的任何提示。

标签： reactjsdjango