Загрузка изображения в Imgur API через JS Fetch API отменяется браузером

Я написал небольшое приложение на Codepen для загрузки в определенный альбом Imgur с помощью API-интерфейса Javascript Fetch. Приложение не загружается, и я не знаю, почему, так как на самом деле я не получаю ответа от сервера. Браузер, похоже, отменяет запрос, а не отправляет его.

Запрос вкладки сети инструментов Chrome dev отменен

Сведения о запросе инструментов Chrome dev

Вот мой код:

const form = document.querySelector('form');
form.addEventListener('submit', event => {
  const fileInput = event.target.querySelector('input');
  const imageFile = fileInput.files[0];

  const formData = new FormData();
  formData.append('image', imageFile);
  formData.append('album', 'EVGILvAjGfArJFI');

  fetch('https://api.imgur.com/3/image', {
    method: 'POST',
    headers: new Headers({
      'Content-Type': 'multipart/form-data',
      Authorization: 'Client-ID 90ef1830bd083ba',
    }),
    body: formData
  }).then(response => {
    if (response.ok) {
      alert('Image uploaded to album');       
    }
  }).catch(error => {
    console.error(JSON.stringify(error));
    alert('Upload failed: ' + error);
  });
});

Я не уверен, нужно ли мне читать файл или я могу передать объект файла непосредственно в данные формы. Я видел примеры обоих методов в Интернете, и я попробовал оба с тем же результатом. Я заметил, что инструменты разработчика не отображают данные изображения в теле запроса. Не уверен, означает ли это, что он не отправляется или Chrome просто не отображает его, поскольку в любом случае он не будет удобочитаемым для человека. Я пробовал запрос с включенным и выключенным режимом CORS.

Любое руководство о том, что я делаю неправильно здесь?


person raddevon    schedule 30.01.2018    source источник
comment
Вам нужно также добавить параметр init:{credentials: "include"} к вашему fetch? В противном случае он не будет отправлять файлы cookie.   -  person zero298    schedule 05.02.2018
comment
@zero298 Zero298 Похоже, файлы cookie не нужны. Единственная аутентификация, необходимая для запроса, — это заголовок Authorization.   -  person raddevon    schedule 06.02.2018


Ответы (1)


Для FormData вам фактически не нужен заголовок Content-Type. Браузер автоматически добавляет это для вас, когда в теле есть тип FormData. Я думаю, это потому, что этому заголовку нужна дополнительная информация (когда браузер автоматически обрабатывает ее, на моей машине она выглядит как multipart/form-data; boundary=----WebKitFormBoundaryvAmR7mCXOyHiPIH5).

Вот обновленная ручка, которая работает: https://codepen.io/ccnokes/pen/wyBYOd< /а>

Кроме того, поскольку вы отправляете эти данные через <form>, но обрабатываете запрос через fetch, вам нужно указать <form> не выполнять полное изменение навигации по странице для POST формы (что отменяет выборку). Поэтому я добавил event.preventDefault() в обработчик submit этой формы.

person ccnokes    schedule 30.01.2018
comment
Это работает. Похоже, что запрос все еще кидается, но запрос действительно попадает в Imgur, и изображение попадает в альбом. Спасибо за вашу помощь! - person raddevon; 31.01.2018
comment
Только что проверил это снова, и это не бросает для меня. Странный. Что ж, рад, что помогло! - person ccnokes; 31.01.2018
comment
Только что заметил еще одно важное изменение, которое вы сделали: event.preventDefault(). Я думаю, что распространение события приводит к отмене моего запроса на выборку при отправке формы. Возможно, вы захотите добавить это и к своему ответу. - person raddevon; 04.02.2018
comment
@raddevon ах да, забыл об этом. Обновил. - person ccnokes; 05.02.2018