Ошибка getCSRFToken не определена, JavaScript

Это часть кода в Django + JavaScript Todo App, которая отвечает за удаление заметки. Для этого мне нужен csrftoken, но JS выдает ошибку в консоли. Что я сделал не так и как я могу это исправить?

    Uncaught ReferenceError: getCSRFToken is not defined
    at HTMLButtonElement.<anonymous> (main.js:100:30)

    const delUrl = document.body.dataset.delNoteUrl;
  
    deleteBtn.addEventListener("click", (e) => {
      e.preventDefault();
  
      if (e.target.classList.contains("delete-btn")) {
        const parentLi = e.target.closest(".todo__note");
        const noteId = parentLi.getAttribute("data-id");

        fetch(`${delUrl}/${noteId}`, {
            method: "POST",
            headers: {
              "X-CSRFToken": getCSRFToken(),
            },
          })
            .then((response) => response.json())
            .then((data) => {
              if (data.status == "success") {
                parentLi.remove();
              }
            });
      }
    });```

Here is HTML, if need.

<ul class="todo__list">
  {% for note in notes %}
  <li class="todo__note flex" data-id="{{ note.id }}">
    <div>
      <input type="checkbox" />
      <span>{{ note.text }}</span>
    </div>
    <div class="delete__edit">
      <button class="edit-btn" id="editBtn">
        <img src="{% static 'images/edit.svg' %}" alt="" />
      </button>
      <button class="delete-btn" id="deleteBtn">
        <img src="{% static 'images/delete.svg' %}" alt="" />
      </button>
    </div>
  </li>
  {% endfor %}
</ul>

Как следует из сообщения об ошибке, вы используете функцию getCSRFToken, но вы не определили такую функцию. Функция может быть где-то определена, но тогда она находится в файле JavaScript, который не был импортирован (до запуска этой функции).

В документации Django приведена подсказка о том, как получить токен CSRF:

function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
const csrftoken = getCookie('csrftoken');

таким образом, мы можем определить функцию для этого с помощью:

function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

function getCSRFToken() {
    return getCookie('csrftoken');
}
Вернуться на верх