Проблема с отправкой данных через JavaScript fetch() в Django

Оффтоп javascript
1

Привет всем! У меня возникла проблема при работе с Django и JavaScript. Пытаюсь отправить данные на сервер через fetch(), но что-то идет не так.

Вот мой HTML:

<form method="POST">
    {% csrf_token %}
    <div id="zakaz"></div>
    <div><p id="itogo"></p></div>
    <button onclick="zapis_zakaza()">Отправить</button>
</form>

JavaScript:

function zapis_zakaza() {
    fetch("http://127.0.0.1:8000/", {
        method: "POST",
        body: JSON.stringify({
            "tovar": "Книга",
            "cena": 500
        }),
        headers: {
            "Content-type": "application/json; charset=UTF-8",
        }
    })
    .then((otvet) => otvet.json())
    .then((data) => console.log(data));
}

В Django view:

def post(self, zapros):
    print("Получено:")
    print(zapros.POST)
    return HttpResponseRedirect("/")

Но при нажатии на кнопку в консоли браузера выскакивает ошибка 403 и что-то про CSRF токен. На сервере тоже ничего не приходит.

Как правильно отправить данные, чтобы они дошли до метода post() в Django view? Буду благодарен за помощь!

2

Слушай, походу у тебя с CSRF токеном проблема. Попробуй его в заголовки fetch() добавить. Возьми токен из формы и передай в X-CSRFToken. Типа так:

const csrfToken = document.querySelector(‘input[name=“csrfmiddlewaretoken”]’).value;
headers: {
“X-CSRFToken”: csrfToken
}

А в Django view json данные из request.body вытаскивай, а не из POST. Должно сработать!

3

Да, проблема точно в CSRF-токене. Вот что нужно сделать:

  1. Получи токен из формы:
    const csrfToken = document.querySelector(‘[name=csrfmiddlewaretoken]’).value;

  2. Добавь его в заголовки fetch:
    headers: {
    ‘X-CSRFToken’: csrfToken,
    ‘Content-Type’: ‘application/json’
    }

  3. В Django view используй request.body вместо POST:
    data = json.loads(request.body)

Это должно решить проблему. Удачи!