Что делать с CSRF token missing or incorrect?

Question

[leo9797]

Хочу отправить записанный аудио-файл на View используя AJAX. Пишет сообщение:

Forbidden (CSRF token missing or incorrect.)

Сам код JQuery:

console.log("Остановка записи")
rec.stop()
gumStream.getAudioTracks()[0].stop();
$('#btnToStopRecord').attr('id', 'btnToRecord');
$("#toMessage").prop('disabled', false).attr('placeholder', "Введите сообщение...")
rec.exportWAV(function (blob) {
    let data = new FormData()
    data.append('csrfmiddlewaretoken', '{{ csrf_token }}')
    data.append('audio', blob)
    console.log(data)
    $.ajax({
        type: "POST",
        url: '{% url 'sendtext' %}',
        contentType: false,
        cache: false,
        processData: false,
        data: {
            'audioFile': data,
             'csrfmiddlewaretoken': '{{ csrf_token }}',
             },
      })

Я и в файле view.py использовал и:

• @csrf_exempt
  
• @method_decorator(csrf_protect)
  

Все равно нечего, подскажите что делать?

Answer 1

[Dima Polos]

Надо с бекенда получить csrf токен, и потом с клиента вместе с запросом его отправить назад на бекенд.

Comments

[leo9797]

С помощью {{ csrf_token }} я получаю токен с бэкенда, и через AJAX его и отправляю

[Dima Polos]

leo9797, '{{ csrf_token }}' - вот такая строка уходит как токен на бекенд, может Вы его и получили на клиенте, но отправляете вместо токена просто строку текста '{{ csrf_token }}'

[leo9797]

Dima Polos, нет, я отправляю именно токен а не {{ csrf_token }}

[Dima Polos]

leo9797,
может я чего не понял, но вот в Вашем коде явно строка, или этот код генерируется в шаблонизаторе?

[leo9797]

Dima Polos, {{ }} <- Jinja

[Dima Polos]

leo9797, Вы в devtools->network проверили, что приходит токен? проверьте, что ключ без опечаток, по которому токен передаете. проверьте механизм обработки этого запроса на беке, получаете ли Вы там токен, как происходит валидация.. в общем дебаг)

[leo9797]

Dima Polos, Нашел причину, при processData если ее убрать все работает, но тогда форма не передается, такая дилема получается, не понятно как и то и то сделать что бы работало

[Dima Polos]

leo9797, я бы мог порекомендовать заменить ajax на xhr или fetch, тогда это легко решить. У Вас есть ограничение по браузерам?
Дело в том, что у Вас есть ошибки в оформлении тела запроса, во-первых вы шлете бинарные данные, значит contenttype multipart/form-data, во-вторых, proccessData надо отменить, потому что в строку преобразовать данные не нужно, и в ключе data Вы передаете объект, а в него передаете еще объект класса formdata, там явно каша

[leo9797]

Dima Polos, воспользовался советом по поводу xhr и помогла, спакойно и за менее кол-во строк получилось без проблем передать запись, спасибо за подсказку

[Dima Polos]

leo9797, да, вот и я о том) просто этот jquery морально устарел, иногда с ним труднее, чем на чистом js) Рад, что у Вас все получилось. Успехов!

[leo9797]

Dima Polos, Да бывает и так, но все же некоторое с ним гораздо быстрее писать....но некоторое....чисто вызуальное ахах....спасибо еще раз за подсказку