Как сформировать запрос в js как в cURL?

Question

[Tdvist]

Пытаюсь сделать запрос для добавки файлов задачу на youtrack , но постоянно приходят ошибки.
На данный момент есть инпут.
<input type="file" name="upload" id="file">
Из него достаю файл и пихаю в запрос

let formData = new FormData();
                files.forEach((file) => {
                    formData.append('upload', file, file.name)
                })

                requestFile(`/issues/${id}/attachments?fields=id,name`, {
                    method: 'POST', body: formData
                })

после запроса payload:
Content-Disposition: form-data; name="upload"; filename="back.png"
Content-Type: image/png

Но возвращается 400 ошибка.

curl запрос из туториала:
curl -v -i -F upload=@/Users/jetbrains/Downloads/youtrack.txt \
-F upload=@/Users/jetbrains/Downloads/youtrack_new.jpeg \
-H 'Authorization: Bearer perm:cm9vdA==.MjZGZWI=.WB02vjX0cM2ltLTJXUE3VOWHpJYYNx' \
-H 'Content-Type: multipart/form-data' \
-X POST 'https://example.youtrack.cloud/api/issues/99-500/a...'

Comments

[Вадим]

Код состояния ответа "HTTP 400 Bad Request" указывает, что сервер не смог понять запрос из-за недействительного синтаксиса. Клиент не должен повторять этот запрос без изменений.

То есть что-то не так с телом запроса.

авторизация, content-type заголовки указываете?

[Вадим]

Content-Type: image/png а у вас должно быть multipart/form-data

[Tdvist]

Вадим, это в payload такой. А в запросе
headers: {
Authorization : `Bearer ${configUT.token}`,
// Accept: 'application/json',
'Content-Type': 'multipart/form-data',
},

[Вадим]

Tdvist, не совсем понятно что в payload? payload это полезная нагрузка. Для post запроса это непосредственно тело запроса.
Согласно https://www.jetbrains.com/help/youtrack/devportal/...
должно быть тело запроса и заголовки.
Ну и ещё через курл говорит что нужно указывать где файл должен быть сохранён, как я понял, через -F опцию

[Вадим]

Правда по ссылке выше как я понял вариант когда файл уже загружен на сервер и имеет какой то урл

[Tdvist]

Вадим, Вот что я имею ввиду. Что сам по себе файл запрос съедает файл и обрабатывает.

[alexalexes]

А если запрос отправить через XMLHttpRequest, вместо requestFile?

[Tdvist]

Вадим, Да верно там вся документация завязана на запросов с сервера другого, а не кросс доменные запросы. Но кросс доменные тоже работаю (я уже создаю саму задачу со своего сайта). Как я понял сам curl запрос означает возьми файлы запихай их в поле upload у FormData и отправь.

[Tdvist]

alexalexes, вот так выглядит функция requestFile

async function requestFile(endpoint, options = {}) {
            endpoint = configUT.url + endpoint;
            let url = encodeURI(endpoint);
            let response = await fetch(endpoint,
                Object.assign({
                    headers: {
                        Authorization : `Bearer ${configUT.token}`,
                        // Accept: 'application/json',
                        'Content-Type': 'multipart/form-data',  
                    },
                }, options
            ));
            console.log(response);
            if (response.ok) {
                let data = await response.json();
                console.log(data);
                return data
            }
        };

то есть под капотом fetch

[alexalexes]

formData.append('upload', file /* а тут точно тело файла, а не объект с метаданными файла ?*/, file.name)

[Tdvist]

alexalexes, Там объект класса file, который наследуется от Blob и вроде как допустим в качестве аргумента в formData.append

[Tdvist]

alexalexes, Я даже пробовал не через метод append, а через formData(дом элементы формы), чтобы он сам поля сделал. Такой же эффект. И даже что-то другое добавляю, js сам ругаться начинает, что не blob.

[Надим]

Tdvist, у вас на картинке пустой запрос, то есть файл с картинкой не содержит в себе данных. Вы передаете пустой файл.

[Tdvist]

zkrvndm, Ты определил т.к. у меня в payload ниже нет строки blob? С картинкой (файлом) все ок. Но интересно почему ты сделал такой вывод.

[Надим]

Tdvist, нет, у тебя буквально в кодированном теле запроса пустое место на месте где должен быть бинарник от картиники.

Вызови ручками:
window.open(URL.createObjectURL(file));
Чтобы посмотреть что лежит внутри file.

[Tdvist]

zkrvndm, ну да я и говорю вот тут должен быть. Вызвать не смогу т.к. не работе. Но сам открывал, и там была картинка.

[Tdvist]

zkrvndm, А может как-то прокси не пускать тело файла? Корпоративная сеть просто.

[Надим]

Tdvist, это вряд ли. И еще непонятно, почему вы указываете заголовок: 'Content-Type': 'multipart/form-data'
Так делать не нужно, браузер сам пропишет этот заголовок, если передается корректный FormData. Дело в том, что именно в таком виде заголовка недостаточно, надо еще в нем же указать использованный разделитель - браузер это делает сам.

[Tdvist]

zkrvndm, Ты прав стоит убрать. Но это разве может повлиять?

[Надим]

Tdvist, не знаю, но если этот заголовок пройдет, запрос будет не валидным, так как в нем отсутствует разделитель, что используется в кодированном теле запроса.

[Tdvist]

zkrvndm, Ты оказался прав. Дело было только в этом. Был уверен, что ранее в проектах делал также. Оказалось что нет))))

Answer 1

[Tdvist]

Действительно нужно было убрать заголовок 'Content-Type': 'multipart/form-data'