Получение "TypeError: не удалось извлечь", когда запрос фактически не сработал

Я использую API-интерфейс Fetch в моем приложении React. Приложение было развернуто на сервере и отлично работало. Я тестировал его несколько раз. Но внезапно приложение перестало работать, и я не знаю, почему. Проблема в том, что когда я отправляю запрос на get, я получаю действительный ответ от сервера, но также API-интерфейс fetch ловит исключение и показывает TypeError: failed to fetch. Я даже не внес никаких изменений в код, и это проблема со всеми компонентами React.

Я получаю действительный ответ.

Но также получить эту ошибку в одно и то же время.

fetch(url)
.then(res => res.json())
.then(data => {
  // do something with data
})
.catch(rejected => {
    console.log(rejected);
});

Когда я удаляю credentials: "include", он работает на localhost, но не на сервере.

Я пробовал каждое решение, данное в StackOverflow и GitHub, но это просто не работает для меня.

Ответ 1

Проблема может заключаться в ответе, который вы получаете от внешнего сервера. Если он работал нормально на сервере, тогда проблема может заключаться в заголовках ответов. Проверьте заголовки ответов в Access-Control-Allow-Origin (ACAO). Обычно API-интерфейс API-интерфейса Fetch API будет выдавать ошибку, даже после получения ответа, когда ACAO заголовков ответов и источник запроса не совпадают.

Ответ 2

Обратите внимание, что в вашем коде есть не связанные проблемы, но это может вас укусить позже: вы должны return res.json() иначе вы не поймаете никакой ошибки, возникающей при разборе JSON или ваших собственных данных обработки функций.

Вернуться к вашей ошибке: у вас не может быть TypeError: failed to fetch с успешным запросом. Вероятно, у вас есть другой запрос (проверьте свою панель "сеть", чтобы увидеть все), которая ломается и заставляет эту ошибку регистрироваться. Кроме того, возможно, проверьте "Журнал сохранения", чтобы убедиться, что панель не очищена никаким неразрешимым перенаправлением. Иногда у меня есть постоянная панель "консоль" и очищенная панель "сеть", которая приводит меня к ошибке в консоли, которая фактически не связана с видимыми запросами. Вы должны это проверить.

Или вы (но это было бы порочным) на самом деле имели hardcoded console.log('TypeError: failed to fetch') в вашем окончательном .catch ;) и ошибка на самом деле в вашем .then() но это трудно поверить.

Ответ 3

У меня похожая проблема, и, поскольку я новичок, вот несколько фактов, которые можно прокомментировать:

Я отправляю данные формы на лист Google следующим образом (scriptURL - это https://script.google.com/macros/s/AKfy..., showSuccess() показывает простое изображение):

fetch(scriptURL, {method: 'POST', body: new FormData(form)})
.then(response => showSuccess())
.catch(error => alert('Error! ' + error.message))

Выполнено в Edge, мой HTML не показывает ошибку, и вкладка Сеть сообщает об этих 3 запросах: Выполненный в Chrome, мой HTML (index.htm) показывает, что не удалось получить ошибку, и вкладка Сеть сообщает об этих 2 запросах: Значение во втором столбце заблокировано: другое, также есть ошибка на вкладке Консоль:

ПОЛУЧИТЬ https://script.googleusercontent.com/macros/echo?user_content_key=D-ABF... нетто :: ERR_BLOCKED_BY_CLIENT

Чтобы приостановить установленные расширения Chrome, я выполнил свой код в окне Incognito, и сообщения об ошибках нет, а вкладка Network сообщает об этих 2 запросах:

Я предполагаю, что что-то (расширение?) Мешает Chrome прочитать ответ на запрос (запрос GET заблокирован).