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

Question

[Алексей Сегодин]

Привет!
Помогите, пожалуйста, с проблемой. Не знаю в чём дело.
Есть такой код, который работает исправно:

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 до Ларавеля данные как будто бы не доходят — нечего обрабатывать. Вот так выглядит текст ошибки:



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



Помогите разобраться.

Comments

[Lynn «Кофеман»]

У вас название заголовков разное.

XSRF vs CSRF

[Алексей Сегодин]

Алексей Тен, вот же чёрт, столько людей смотрело и никто не заметил :) Спасибо!

[Алексей Сегодин]

Вы напишите это как ответ к вопросу, чтобы я его закрыл.

Answer 1

[Радость моя]

у вас в примере xhr: X-CSRF-TOKEN
а в примере с fetch: X-XSRF-TOKEN

Answer 2

[Mikhail Osher]

В первом случае Content-Type = application/json, во втором - multipart/form-data.
Возможно из-за этого проблемы. Если не отправляете никаких файлов, тогда надо этот заголовок изменить.
Использование FormData форсит заголовок Content-Type=multipart/form-data.
Можете написать const data = new URLSearchParams(formDataObject);

// EDIT

Я неправильно скриншоты прочитал, в обоих случаях content-type=multipart/form-data улетает..
Надо думать :)

Comments

[Алексей Сегодин]

Понимаю, что вы говорите, но это не помогло. Сделал так:

let formData = new FormData();
formData.append('x', x);
formData.append('y', y);
const data = new URLSearchParams(formData);

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

Также добавлял в headers строчку 'Content-Type': 'application/json' — без изменений.

Answer 3

[frees2]

1 Заголовок, тупо посмотреть образцы.
2 Самое прикольное, на стороне "загружаемой странички" js не работают ( если есть, в случае с fetch на главной), это сделано для безопасности.

Comments

[Алексей Сегодин]

1 Заголовок, тупо посмотреть образцы.

Я пол интернета перерыл прежде чем прийти сюда с вопросом :) Ничего не помогло из того что находил.

2 Самое прикольное, на стороне "загружаемой странички" js не работают ( если есть), это сделано для безопасности.

Этот пункт не понял...