Aleksei_Segodin
@Aleksei_Segodin
арт директор / дизайнер

XHR работает, fetch — не работает. Видимых отличий в параметрах запросов нет. В чем проблема?

Привет!
Помогите, пожалуйста, с проблемой. Не знаю в чём дело.
Есть такой код, который работает исправно:
let formData = new FormData();
formData.append('x', x);
formData.append('y', y);
            
var xhr = new XMLHttpRequest();        
xhr.open('POST', `/team/${id}`);
xhr.setRequestHeader('X-CSRF-TOKEN', token);
xhr.send(formData);


Но когда меняю его на аналогичный fetch, то сервер возвращает ошибку 500:
let formData = new FormData();
formData.append('x', x);
formData.append('y', y);

fetch(`/team/${id}`,
    {
        method: 'POST',
        headers : {
            'X-XSRF-TOKEN': token
        },
        body: formData
});


На сервере данные принимает Laravel . Бекендер говорит, что в случае с fetch до Ларавеля данные как будто бы не доходят — нечего обрабатывать. Вот так выглядит текст ошибки:

5bc5bda5d0d4d188207963.png

А вот так выглядят запросы через XHR и fetch:

5bc5bdc282351747640425.png5bc5bdc955fae465820101.png

Помогите разобраться.
  • Вопрос задан
  • 311 просмотров
Решения вопроса 1
t-alexashka
@t-alexashka
Сразу пишу legacy код
у вас в примере xhr: X-CSRF-TOKEN
а в примере с fetch: X-XSRF-TOKEN
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
miraage
@miraage
Старый прогер
В первом случае Content-Type = application/json, во втором - multipart/form-data.
Возможно из-за этого проблемы. Если не отправляете никаких файлов, тогда надо этот заголовок изменить.
Использование FormData форсит заголовок Content-Type=multipart/form-data.
Можете написать const data = new URLSearchParams(formDataObject);

// EDIT

Я неправильно скриншоты прочитал, в обоих случаях content-type=multipart/form-data улетает..
Надо думать :)
Ответ написан
@frees2
1 Заголовок, тупо посмотреть образцы.
2 Самое прикольное, на стороне "загружаемой странички" js не работают ( если есть, в случае с fetch на главной), это сделано для безопасности.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы