Кто-нибудь делился токеном CRSF между React и Django, не сталкиваясь с Forbidden 403?

Я пытался выполнить простую конечную точку, которую я сделал доступной с помощью Django, из моего фронтенда, React. Это POST-запрос, который проверяет, существует ли URL. Это просто демонстрация, чтобы я мог ознакомиться с процессом полного стека. Проблема в том, что при любой попытке протестировать эту конечную точку вне React, я получаю журнал ошибок Forbidden: CSRF token missing or incorrect в консоли Django, в то время как внутри React я просто не могу получить запрос. Вот что у меня есть:

Релевантный код

views.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)

component.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. Perused through stackoverflow and found a few helpful links that gave me some of my code like here, but it still resulted in no response
  2. Added @ensure_csrf_cookie to my view, but that didn't have any effect

Вот как далеко я зашел самостоятельно, просто слишком много неопределенностей, чтобы я мог действительно двигаться вперед. Например, код в views.py, похоже, работает, если https://reqbin.com/ может подключиться, но проблема в токене. Поскольку мой код React - единственное, что не оказывает никакого влияния на сервер, то мой fetch, вероятно, неправильный. Я просто не знаю, как он ошибается. Спасибо за любые советы.

Вернуться на верх