CSRF-токен из HTTP-заголовка 'X-Csrftoken' неверен

Я создаю веб-приложение (SPA, если быть точным) с отдельным фронтендом (React) и бэкендом (DRF). Оно использует сеансовую аутентификацию, но CSRF-токен по какой-то причине не корректен, и мне трудно понять почему, в частности, на маршруте выхода из приложения.

Вот как я получаю и отправляю токен:

    fetch(APIURL + "/api/csrf-token/")
      .then((response) => {
        return response.json();
      })
      .then((json_response) => {
        const XCSRFToken = json_response["X-CSRFToken"];
        const logout_response = fetch(APIURL + "/api/logout/", {
          headers: {
            "Content-Type": "application/json",
            "X-CSRFToken": XCSRFToken,
          },
          credentials: "include",
          method: "POST",
      })
      // then do stuff

Но это приводит к следующей ошибке: CSRF Failed: CSRF token from the 'X-Csrftoken' HTTP header incorrect. Я не уверен, где я ошибаюсь, потому что я не понимаю, как CSRF-токен может быть неправильным. Прежде чем я приведу остальную часть кода, есть еще одна вещь, которая меня смущает. Когда я вхожу в систему, браузеру передается HTTP-куки с именем csrftoken; должен ли я что-то делать с этим?

Вот мои представления для получения CSRF-токена и выхода из системы.

@api_view(["GET"])
def csrf_token(request):
    response = Response(
        {"detail": "CSRF cookie set", "X-CSRFToken": get_token(request)}
    )
    return response

@api_view(["POST"])
def logout_user(request):
    logout(request)

Если есть какой-либо другой код, который я могу предоставить, пожалуйста, дайте мне знать.

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