Axios: Установите код / ​​статус для «Ошибка сети»

Созданный на 20 июл. 2016  ·  69Комментарии  ·  Источник: axios/axios

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

В этом случае сетевые запросы axios вызывают ошибку, которая отличается от всех других ошибок axios, как обсуждается здесь: https://github.com/mzabriskie/axios/issues/204

В моем коде кажется, что единственный способ обнаружить эту ошибку - проверить сообщение об ошибке:
if (err.message === "Network Error"){/*tell user the server is down*/}

Это меня беспокоит, потому что сравнение строк немного рискованно; возможно, когда-нибудь это сообщение будет переведено, и мой код выйдет из строя.

Было бы здорово, если бы err.status или err.code (или err. ???) были установлены на какое-то задокументированное значение, которое мы можем проверить в нашем коде.

Есть ли другой способ обнаружить этот сценарий, который мне не хватает?
Спасибо всем!

Самый полезный комментарий

У меня такая проблема. Кто-нибудь может мне помочь?

Ответ сервера - 401, но axios дает мне следующее:

ошибка -> «Ошибка сети»
error.response -> undefined
error.status -> undefined

Все 69 Комментарий

Я думаю ты прав. Код состояния имеет смысл.

Как кто-то сказал в №204, в некоторых случаях невозможно отловить сетевые ошибки в браузере, поэтому Axios отвечает общей ошибкой ( new Error('Network error') ). Если вы хотите отличить их от плохих ответов (код состояния! == 2xx или пользовательская проверка), я думаю, что лучший способ - это просто проверить свойство status вместо сообщения об ошибке. Например:

axios.request(options).catch(function(error) {
  if (!error.status) {
    // network error
  }
});

Я думаю, что установка пользовательского кода состояния была бы плохой идеей (это может вызвать еще большую путаницу), а установка определенного свойства вообще не поможет, потому что у нас есть только один случай ошибки.

Конечно, в Node.js это проще, потому что у вас есть доступ к фактической ошибке и вы можете проверить в соответствии с документацией Node.js.

Ах, значит, любая ошибка, вызванная вызовом Axios, гарантированно будет либо 1) иметь статус, либо 2) быть общей сетевой ошибкой? Полагаю, этого достаточно.

Пока я не могу получить код ошибки, например 404 500 .., но я все еще получаю сетевая ошибка. Как это решить?
instance.post ('/ foo', {request_id: 12345})
.then (функция (ответ) {})
.catch (функция (ошибка) {
console.log (ошибка); // Ошибка сети
console.log (error.status); // неопределенный
console.log (код ошибки); // неопределенный
});

Ошибка сети означает, что Axios вообще не может подключиться к вашему серверу, поэтому он не может получить код ошибки с сервера. Может быть, попробуйте с другим инструментом (curl, почтальоном или браузером), чтобы убедиться, что вы можете подключиться к нему?

Я могу подключиться к своему серверу, он фактически возвращает код ошибки 404, а с некоторыми другими вызовами API сервер возвращает 500 Внутренняя ошибка сервера, но все же я не могу получить код сетевой ошибки с помощью сценариев (например, console.log ( error.status); // не определено).

Это в error.response.status .

У меня такая проблема. Кто-нибудь может мне помочь?

Ответ сервера - 401, но axios дает мне следующее:

ошибка -> «Ошибка сети»
error.response -> undefined
error.status -> undefined

Когда ошибка "сетевая ошибка", это означает, что Axios не может подключиться к вашему серверу или по какой-то причине не получает ответ от вашего сервера. Так что ошибка 401 никогда не попадает в Axios. Может быть, разместите вопрос с образцом кода на StackOverflow?

Разберитесь с этим при использовании AWS API-Gateway. Для тех, кто видит те же проблемы, это проблема с ошибками 4xx (в моем случае 401), которые не отвечают заголовками CORS. Потратил часы на устранение этой чертовой проблемы! Спасибо @ jonathan-stone за то, что правильно указал на мой поиск и устранение неисправностей.

@codygreen У меня все еще возникают эти проблемы, и я столкнулся с этим https://forums.aws.amazon.com/message.jspa?messageID=763752

Вы нашли обходной путь?

У кого-нибудь есть решения этой проблемы?

Моя проблема была в Jest + Axios. Я решил это, добавив это в свой package.json:

"jest": {
    "testEnvironment": "node"
}

Это работает, хотя я не могу найти подтверждающую документацию. Я предполагаю, что error.response должен быть пустым при сетевой ошибке, иначе это ошибка api.

axios.request(options).catch(function(error) {
  if (!error.response) {
    // network error
  } else {
    // http status code
    const code = error.response.status
    // response data
    const response = error.response.data
  }
});

Кто-нибудь нашел лучшее решение по этому поводу? Люди Axios пошуметь :(

У меня тоже сегодня такая ошибка, я не знаю, в чем проблема, это мой скрипт:

js var url = "http://localhost:8000/"; Axios.get(url).then(function(response){ alert(response) }).catch(function(error){ alert(error) });

http: // localhost : 8000 / возвращает ответ JSON, это не работает на других хостах

Возможно, это ошибка Cors.

Строка 87, в адаптере xhr установлено значение «Ошибка сети»? как это изменить, чтобы можно было отловить ошибку?
https://github.com/axios/axios/blob/d7f021b8d4cc50bfa0653011bc02452d234d1255/lib/adapters/xhr.js#L84 -L91

Мое плохое, это не проблема, а ожидаемое поведение из-за безопасности браузера. В ответах об ошибках XHR теперь появляется сообщение ProgressEvent о кодах состояния ошибки.

У меня такая же проблема. Я считаю, что это проблема CORS. Кто-нибудь нашел для этого хорошее решение?

@codygreen Удалось ли вам исправить проблему с API Gateway? Не могу даже понять код состояния ответа, чтобы помочь мне в дальнейшей отладке.

Здесь та же общая проблема. Для меня это определенно был CORS. Браузер делал запросы OPTIONS на сервер, и у меня не было настройки обработчика для них (в узле). Axios завершит (неудачный) запрос успешно, но с неопределенным ответом

      return axios.httpClients.server.post('/someUrl, {
        someData:some_data
      }).then(response => {
        console.log(response);
        //the following errors out because response is undefined
        if (response.data && response.data.success === true) {
        }
      }).catch(err => {
           //catch never triggered
            console.log(err)
      });

Какой у вас код ответа? если это сетевая ошибка, при использовании Fetch API браузеры будут записывать ее в консоль, но не передавать в JavaScript из соображений безопасности, поэтому тело пусто. См. FETCH STANDERS , если вы хотите получить доступ к сетевым ошибкам ответа, измените код ответа HTTP на 200 и включите сообщение об ошибке в тело ответа.

Моя проблема заключалась в проблеме с DNS. Он работал в почтальоне, но не работал в аксиомах. Пытался завить локон, чтобы узнать, что у него тоже не получается. Итак, мой DNS был настроен неправильно. Проверьте это, если вы столкнетесь с этой проблемой.

Не уверен, применимо ли это к другим случаям, но вот как я решил эту же проблему (учитывая, что мы говорим о CORS ).

На стороне внешнего интерфейса убедитесь, что вы передаете параметр headers as в свои запросы PUT или POST :

const axiosParams = {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    'Accept': 'application/json',
  },
};

axios.put(`${api.url}/like`, axiosParams)
  .then((response) => {
    // ...
  });

А на стороне Backend убедитесь, что вы используете CORS с Express:

// server.js
const express = require('express');
const app = express();

var cors = require('cors'); // Yep, you need to install this
app.use(cors()); // Works 🎉

Ссылки: здесь и здесь .

Ребята, я тоже борюсь с этим вопросом на время. Но теперь я понял проблему моей сети сообщений axios createError на устройстве Android. Причина сетевой ошибки axios заключается в том, что данные формы, которые я передал в axios, содержат неправильный тип объекта данных, я думаю. Я включил объект изображения (объект ImagePicker из Expo) в качестве одного из параметров данных формы, которые, как мне кажется, не принимаются аксиомами. Axios может принимать в качестве параметров только строку, число с плавающей запятой, целое число или изображение. изображение не может передаваться как параметр, это не тип изображения, это собственный объект реакции, я удалил его и включил поле изображения в качестве параметра, присвоив image.uri значению параметра, тогда он работает. Надеюсь, это поможет некоторым людям, которые могут столкнуться с той же проблемой, с которой я сталкивался раньше.
Удаляя некоторые данные формы один за другим при тестировании сетевой ошибки axios, вы узнаете, какая из них является причиной проблемы.

~ @codygreen @hammadzz вы нашли решение этой проблемы с помощью Amazon API Gateway? ~

Обновление: если кто-то наткнется на это с API Gateway и CORS, вам нужно добавить заголовок ответа access-control-allow-origin в свои ответы.

Как кто-то сказал в №204, в некоторых случаях невозможно отловить сетевые ошибки в браузере, поэтому Axios отвечает общей ошибкой ( new Error('Network error') ). Если вы хотите отличить их от плохих ответов (код состояния! == 2xx или пользовательская проверка), я думаю, что лучший способ - это просто проверить свойство status вместо сообщения об ошибке. Например:

axios.request(options).catch(function(error) {
  if (!error.status) {
    // network error
  }
});

Я думаю, что установка пользовательского кода состояния была бы плохой идеей (это может вызвать еще большую путаницу), а установка определенного свойства вообще не поможет, потому что у нас есть только один случай ошибки.

Конечно, в Node.js это проще, потому что у вас есть доступ к фактической ошибке и вы можете проверить в соответствии с документацией Node.js.

Если вы здесь из Google, обратите внимание, что этот API устарел. Это с 2016 года, v <0,13.

Вы хотите проверить error.response когда сервер отвечает, error.response === undefined для автономного статуса и особый случай error.code === 'ECONNABORTED' для тайм-аутов.

Обновление: если кто-то наткнется на это с API Gateway и CORS, вам нужно добавить заголовок ответа к своим ответам:

access-control-allow-origin: *

Определенно не делай этого. Установите соответственно исходную точку вместо * .

Для меня это была проблема cors, если вы используете laravel и определяете

 ->middleware(['auth:api'])

вы должны добавить все другое промежуточное ПО, которое вам нужно, в этот маршрут, явно не унаследованное

->middleware(['auth:api','cors']);

Я также столкнулся с этой проблемой, используйте свой локальный IP-адрес вместо localhost (например, 10.0.0.12:8083). у меня это сработало.

Поэтому, если у меня есть правильный ответ, в некоторых случаях появляется статус 0 из запроса axios. но программно невозможно определить, в каком именно случае он встречается.

К таким случаям относятся случаи, когда предварительный запрос CORS не удался, и, следовательно, фактический запрос даже не выполняется. Из-за этого статус 404 не подходит.

Кому-то нужно купить пиво @joelnet . Это спасло мне день:

https://github.com/axios/axios/issues/383#issuecomment -308606088

У других людей могут быть другие проблемы, но у меня это сработало.

Я периодически получаю эту ошибку. Я предполагаю, что это не проблема CORS.
Мой api / server - это сервер .net.
Кто-нибудь еще сталкивается с этим периодически?

У меня была эта ошибка, потому что я не указывал HTTP или https. В основном сам код выдает ошибку в протоколе undefined. Это должно быть обработано или в мета-ошибке, это должно быть включено.

Как сказал @ jonathan-stone, я не думаю, что это можно исправить, потому что Axios просто не знает, что произошло. Это как отправить друга на Funyuns, и он говорит, что магазин закрыт. Там написано «всегда открыт» - почему закрыли магазин. Они закрылись навсегда (404)? Кто-то болен (500)? У них закончился инвентарь (503)? Он не знает, они просто закрыты (ошибка сети)!

Я получал эту ошибку, когда запускал Axios в быстрой последовательности против локального сервера Express, пытающегося получить различные типы данных из моего API. Дело не в том, что Axios не сообщал о правильной ошибке - он не может - мой сервер Express ничего не ответил, потому что был слишком занят.

Если я повторю запрос (используя retry-axios из # 164), я могу получить данные или, возможно, настоящую ошибку, если что-то не так с ДОСТУПНЫМ сервером.

Для решения проблемы нужно всегда указывать
Nginx

add_header 'Access-Control-Allow-Origin' * всегда ;

Для решения проблемы нужно всегда указывать
Nginx

add_header 'Access-Control-Allow-Origin' * всегда ;

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

Привет, ребята, мы настроили защиту размера объекта на нашем прокси, он возвращает общую ошибку, но я не могу получить код состояния 413 ... возможно ли это как-то?

Screenshot 2019-05-07 at 14 19 26

Вы пробовали объект response ?
axios.get(url).then(stuff => console.log(Object.keys(stuff.response));

@ComputerCarl, ты думаешь, у него есть успешный ответ? Не думайте, что это заканчивается на catch но я могу попробовать ...

Извините! Моя голова была в другом месте! Проверить объект перехвата ...catch(err => console.log(Object.keys(err.response));

Axios doc

У меня в одной из моих программ;
err.response.data.message;

которые я отправил из Express;

app.use(function (err, req, res, next) {
  res.status(err.status || 500);
  // this is err.response.data on Axios client
  res.send({ message: 'my custom error' });
});

@ComputerCarl, но error.response не определено, то же самое, что и error.status :) Вы можете увидеть это на скриншоте, у меня это уже есть в console.log . Как видите, только error.request является объектом XMLHttpRequest.

Хорошо .. Я не знаю, почему вы получаете две ошибки (413 в дополнение к CORS). Однако, если вы используете Express, вам следует включить CORS;

const cors = require('cors');
// ...
app.use(cors());

Кроме того, как я уже говорил выше , если сервер категорически отклоняет ваш запрос, Axios не знает, что вызвало ошибку. На данный момент я в тупике, и вам придется подождать, пока кто-нибудь поумнее ответит. :-)

@ComputerCarl, спасибо за попытку :-D CORS в порядке, у меня много разных вызовов одного и того же API в приложении, и они отлично работают. Я легко могу справиться даже с ошибками, возвращаемыми из API. Проблема в том, что он отменен только на уровне прокси.

Не знаю, поможет ли это вам, но я создал приложение, которое проксировало запросы. Фреймворк, который я использовал, поглощал ошибку Express. Наконец, после явной пересылки ошибки res.send({ message: messageFromProxy }); я смог увидеть ошибку и обработать ее на клиенте.

Удачи.

@ jonathan-stone сказал: «Сетевая ошибка» означает, что Axios вообще не может подключиться к вашему серверу, поэтому он не может получить код ошибки с сервера.

может быть это кому-то поможет.

error.data ;

@ balwant-sd, как вы можете видеть на скриншоте, который я отправил сюда , браузер правильно распознает код статуса 413, но axios не

Даже во вкладке сети я вижу код состояния 413 ...
Screenshot 2019-06-03 at 15 42 12

Как упоминалось выше, POST для входа в систему, который возвращает ошибку 401, возвращает просто «Ошибка сети» с кодом undefined вместо 401.

Таким образом, эта ошибка кажется неверно сконфигурированной ошибкой CORS, которая отражается только на вкладке вашей сети. У меня та же проблема, что и у @ketysek , и кажется, что мой ngnix не применяет CORS для этого. Как упоминалось ранее, общая сетевая ошибка никогда не попадет в axios error.response . Здесь мне нравится винить Backend ... ну подождите, я сделал это ...

Здравствуйте, у меня тоже такая же проблема, даже запрос на получение правильного ответа axios всегда возвращает "Network Error" и переходит к .catch (function (error) {}); пар. есть ли у кого-нибудь решение этой проблемы?

Сегодня у меня была такая же проблема. Эта проблема в основном связана с тем, что серверная часть не разрешает исходные межсайтовые HTTP-запросы. В моем случае я использую django, поэтому я просто поместил класс corsheaders как можно выше в MIDDLEWARE:
MIDDLEWARE = [ 'corsheaders.middleware.CorsMiddleware', //..etc ]
И я создал CORS_ORIGIN_WHITELIST, чтобы разрешить только определенные источники:
CORS_ORIGIN_WHITELIST = [ "http://localhost:8081" , //..etc ]
Это для заголовков django-cors-headers. Если вы не являетесь пользователем django, вам следует проверить документацию на свой любимый модуль заголовков cors.

Как кто-то сказал в №204, в некоторых случаях невозможно отловить сетевые ошибки в браузере, поэтому Axios отвечает общей ошибкой ( new Error('Network error') ). Если вы хотите отличить их от плохих ответов (код состояния! == 2xx или пользовательская проверка), я думаю, что лучший способ - это просто проверить свойство status вместо сообщения об ошибке. Например:

axios.request(options).catch(function(error) {
  if (!error.status) {
    // network error
  }
});

Я думаю, что установка пользовательского кода состояния была бы плохой идеей (это может вызвать еще большую путаницу), а установка определенного свойства вообще не поможет, потому что у нас есть только один случай ошибки.

Конечно, в Node.js это проще, потому что у вас есть доступ к фактической ошибке и вы можете проверить в соответствии с документацией Node.js.

проблема с этим подходом заключается в том, что, допустим, мы запускаем некоторый код в axios.then, и в этом коде есть ошибка, например «присвоение константе» (что было в моем случае), с упомянутым вами подходом мы получим сетевую ошибку для » присвоение константе "

пример кода:

axios(options).then(() => {
  const foo = '';
  foo = 'bar'; // will throw error "assignment to constant"
}).catch(error => {
  if (!error.status) {
    // "assignment to constant" will be considered as network error
  }
})

Я использую эту служебную функцию, чтобы перехватывать сетевые ошибки из нижней части стека вызовов (предотвращает идентификацию неаксиальных ошибок как сетевых):

function isNetworkError(err) {
  return !!err.isAxiosError && !err.response;
}

См. Https://github.com/axios/axios/pull/1419

Я использую эту служебную функцию, чтобы перехватывать сетевые ошибки из нижней части стека вызовов (предотвращает идентификацию неаксиальных ошибок как сетевых):

function isNetworkError(err) {
  return !!err.isAxiosError && !err.response;
}

См. № 1419

Решил проблему
Спасибо

@mifi, можете ли вы показать более подробный пример того, как вы используете isNetworkError чтобы не идентифицировать ошибки, не относящиеся к аксиомам, как ошибки сети?

Именно так:

try {
  ...
  some code that calls axios
  ...
} catch (err) {
  if (isNetworkError(err)) return alert(‘check your connection);
  throw err;
}

Если это ошибка CORS, и вы используете Serverless, это может исправить:

resources:
  Resources:
    # CORS for 4xx errors
    GatewayResponseDefault4XX:
      Type: 'AWS::ApiGateway::GatewayResponse'
      Properties:
        ResponseParameters:
          gatewayresponse.header.Access-Control-Allow-Origin: "'*'"
          gatewayresponse.header.Access-Control-Allow-Headers: "'*'"
        ResponseType: DEFAULT_4XX
        RestApiId:
          Ref: 'ApiGatewayRestApi'

привет, может кто-нибудь мне помочь, "СЕТЕВАЯ ОШИБКА":
https://stackoverflow.com/questions/58717673/axios-sending-network-error- while-status-is-200-ok

Когда ошибка "сетевая ошибка", это означает, что Axios не может подключиться к вашему серверу или по какой-то причине не получает ответ от вашего сервера. Так что ошибка 401 никогда не попадает в Axios. Может быть, разместите вопрос с образцом кода на StackOverflow?

Я также получаю ту же ошибку, для меня она достигает сервера, и я отвечаю 403 и JSON, что приводит к Network Error в Axios

Я могу видеть ответ на вкладке сети браузера, но в блоке catch err.response не определено

image

image

@ narenderv7 я тоже

@WarisR Я исправил это, разрешив cors на стороне сервера. Я думал, что проблема с Axios, но на самом деле это не так. Я могу помочь вам, если вы сообщите мне о проблеме, с которой вы действительно столкнулись.

Добавить на сервер 'Access-Control-Allow-Origin': '*'

@ketysek У меня такая же ошибка

Screenshot from 2019-12-26 16-48-22

вы нашли способ отловить эту ошибку?

Привет, ребята, у меня проблема с ошибкой CORS, когда я получал ответ со статусом 403 (4 * и 5 )Nginx отправляет заголовок «Access-Control-Allow-Origin» только для статуса ответа 2 и 3 *.

Я решаю эту проблему, отредактируйте конфигурацию nginx из:
add_header 'Access-Control-Allow-Origin' '*';
к:
add_header 'Access-Control-Allow-Origin' '*' always;

У меня такая же проблема, я тестирую ее, используя axios 0.18.0 и 0.19.0

Шаги:
Я сделал запрос с истекшим токеном, иногда ошибка. ответ приходил правильно, но иногда ответ об ошибке был неопределенным, а сообщение - «Ошибка сети». Почему это происходит, это ошибка бэкэнда или ошибка в аксиомах?

Иногда это может быть вызвано блокировщиками AD в вашем браузере ...
Попробуйте режим incognito или private или загрузите новый браузер для тестирования ...

@ narenderv7 Да, это ошибка на стороне сервера. Но я думаю, что Axios сможет справиться с ошибкой в ​​этом случае, верно?

Мне нужно выделить эти два случая:

Как я проверял. Возврат ошибки блоком catch одинаков в обоих случаях выше.

Есть еще проблема:
https://github.com/axios/axios/issues/1296

Ошибка все еще существует, если у кого-то есть решение этой проблемы. Поделитесь с нами, пожалуйста.

Я использую эту служебную функцию, чтобы перехватывать сетевые ошибки из нижней части стека вызовов (предотвращает идентификацию неаксиальных ошибок как сетевых):

function isNetworkError(err) {
  return !!err.isAxiosError && !err.response;
}

См. № 1419

ошибка тайм-аута также может соответствовать этим условиям.
image

Была ли эта страница полезной?
0 / 5 - 0 рейтинги