Axios: Defina um código / status para "Erro de rede"

Eu acho que você está certo. Um código de status faria sentido.

Como alguém disse em # 204, existem alguns casos em que é impossível detectar erros de rede no navegador, então o Axios responde com um erro genérico ( new Error('Network error') ). Se você quiser distingui-los de respostas ruins (código de status! == 2xx ou verificação personalizada), acho que a melhor maneira é apenas verificar a propriedade status em vez da mensagem de erro. Por exemplo:

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

Acho que definir um código de status personalizado seria uma má ideia (poderia causar mais confusão) e definir uma propriedade específica não ajudaria em nada, porque temos apenas um único caso de erro.

Claro que em Node.js é mais fácil porque você tem acesso ao erro real e pode verificar de acordo com a documentação do Node.js.

Ah, então qualquer erro lançado por uma chamada do Axios tem a garantia de 1) ter um status ou 2) ser um erro de rede genérico? Suponho que isso seja bom o suficiente.

Até agora, não consegui obter o código de erro como 404.500 .., Ainda estou recebendo erro de rede. Como resolver isso?
instance.post ('/ foo', {request_id: 12345})
.então (função (resposta) {})
.catch (função (erro) {
console.log (erro); // Erro de rede
console.log (error.status); // Indefinido
console.log (error.code); // Indefinido
});

Erro de rede significa que o Axios não conseguiu se conectar ao seu servidor, portanto, não pode obter nenhum código de erro do servidor. Talvez tente com outra ferramenta (curl, carteiro ou um navegador) para garantir que você pode se conectar a ele?

Consigo me conectar ao meu servidor, ele realmente retorna o código de erro 404 e, com algumas outras chamadas de API, o servidor retorna 500 Erro interno do servidor, mas ainda não consigo obter o código de erro da rede por meio de script (ou seja, console.log ( error.status); // indefinido).

Está em error.response.status .

Estou tendo esse problema. Alguém pode me ajudar por favor?

A resposta do servidor é 401, mas axios me dá o seguinte:

erro -> "Erro de rede"
error.response -> undefined
error.status -> indefinido

Quando o erro é "erro de rede", isso significa que o Axios não conseguiu se conectar ao seu servidor ou, por algum motivo, não obteve a resposta do seu servidor. Para que o erro 401 nunca chegue ao Axios. Talvez postar uma pergunta com algum código de amostra no StackOverflow?

Encontrei isso ao usar o AWS API-Gateway. Para quem está vendo os mesmos problemas é um problema com erros 4xx (no meu caso, um 401) não respondendo com os cabeçalhos CORS. Horas gastas resolvendo esse maldito problema! Obrigado @ jonathan-stone por apontar minha solução de problemas de maneira direta.

@codygreen Ainda estou tendo esses problemas e encontrei este https://forums.aws.amazon.com/message.jspa?messageID=763752

Você encontrou uma solução alternativa?

Alguém tem alguma solução para este problema?

Meu problema era com Jest + Axios. Eu resolvi isso adicionando isso ao meu package.json:

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

Isso funciona, embora eu não consiga encontrar documentação para apoiá-lo. Estou assumindo que error.response deve estar vazio em um erro de rede, caso contrário, é um erro de 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
  }
});

Alguém encontrou a melhor solução para isso? As pessoas do Axios fazem barulho :(

Também recebi este erro hoje, não sei qual é o problema, este é o meu script:

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

http: // localhost : 8000 / retorna uma resposta JSON, isso não funciona em outros hosts

Pode ser um erro de Cors.

Linha 87, foi definido como 'Erro de rede' no adaptador xhr? como mudar isso para que o erro seja detectado?
https://github.com/axios/axios/blob/d7f021b8d4cc50bfa0653011bc02452d234d1255/lib/adapters/xhr.js#L84 -L91

Que pena, não é um problema, mas um comportamento esperado devido à segurança do navegador. As respostas de erro XHR agora recebem um ProgressEvent nos códigos de status de erro.

Estou tendo o mesmo problema. Acredito que seja um problema com o CORS. Alguém encontrou uma boa solução para isso?

@codygreen você conseguiu consertar seu problema com o API Gateway? Não consigo nem descobrir o código de status de resposta para me ajudar a depurar mais.

O mesmo problema geral aqui. Para mim foi definitivamente CORS. O navegador estava fazendo solicitações OPTIONS ao servidor e eu não tinha um manipulador configurado para eles (no nó). O Axios completaria a solicitação (com falha) com sucesso, mas com uma resposta indefinida

      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)
      });

Qual é o seu código de resposta da resposta? se for um erro de rede, ao usar o Fetch API, os navegadores registrarão no console, mas não o passarão para o JavaScript por motivos de segurança, portanto, o corpo está vazio. Consulte FETCH STANDERS , se quiser acessar os erros de rede da resposta, altere o código de resposta HTTP para 200 e inclua a mensagem de erro no corpo da resposta.

Meu problema era um problema de DNS. Funcionou no carteiro, mas falhou nos axios. Tentei um curl para descobrir que também estava falhando ali. Portanto, meu DNS não foi configurado corretamente. Verifique se você se depara com esse problema.

Não tenho certeza se isso se aplica a outros casos, mas aqui está como resolvi esse mesmo problema (considerando que estamos falando de CORS ).

No lado do front - headers as em suas solicitações PUT ou POST :

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

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

E no lado do back -

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

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

Refs: aqui e aqui .

Pessoal, eu também estou lutando com esse assunto por um tempo. Mas eu descobri o problema da minha rede postar axios createError no dispositivo Android agora. O motivo do erro de rede do axios é porque os dados do formulário que passei para o axios contêm o tipo errado de objeto de dados, eu acho. Incluí um objeto de imagem (objeto ImagePicker da Expo) como um dos parâmetros de dados do formulário que não são aceitos por axios, eu acho. Axios só pode receber string, float, int ou imagem como parâmetro. image não pode passar como param, não é um tipo de imagem, é um objeto nativo react, eu o removi e incluí um campo de imagem como param atribuindo image.uri ao valor de param então ele funciona. Espero que isso ajude algumas pessoas que podem encontrar o mesmo problema que eu estava enfrentando antes.
Excluindo alguns dos dados do seu formulário, um por um, quando estiver testando o axios Erro de rede, você descobrirá qual é a causa do problema.

~ @codygreen @hammadzz você encontrou uma solução para isso com o Amazon API Gateway? ~

Atualização: se alguém se deparar com isso com o API Gateway e CORS, você precisará adicionar um cabeçalho de resposta access-control-allow-origin às suas respostas.

Como alguém disse em # 204, existem alguns casos em que é impossível detectar erros de rede no navegador, então o Axios responde com um erro genérico ( new Error('Network error') ). Se você quiser distingui-los de respostas ruins (código de status! == 2xx ou verificação personalizada), acho que a melhor maneira é apenas verificar a propriedade status em vez da mensagem de erro. Por exemplo:

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

Acho que definir um código de status personalizado seria uma má ideia (poderia causar mais confusão) e definir uma propriedade específica não ajudaria em nada, porque temos apenas um único caso de erro.

Claro que em Node.js é mais fácil porque você tem acesso ao erro real e pode verificar de acordo com a documentação do Node.js.

Se você veio do Google, observe que esta API está obsoleta. Isso é de 2016, v <0,13.

Você deseja verificar error.response quando o servidor responder, error.response === undefined para status offline e o caso especial de error.code === 'ECONNABORTED' para tempos limite.

Atualização: se alguém se deparar com isso com o API Gateway e CORS, você precisará adicionar um cabeçalho de resposta às suas respostas:

access-control-allow-origin: *

Definitivamente, não faça isso. Defina as origens de acordo em vez de * .

Para mim foi um problema de cors, se você está usando laravel, e você define um

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

você tem que adicionar todos os outros middleware que você precisa para esta rota explicitamente não é herdado

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

Eu também enfrentei esse problema, use seu endereço IP local em vez de localhost (por exemplo, 10.0.0.12:8083). funcionou para mim.

Portanto, se eu tiver o correto, o status 0 de uma solicitação de axios parece aparecer em alguns casos. mas não pode ser determinado programaticamente exatamente qual caso é encontrado.

Esses casos incluem quando uma solicitação de comprovação do CORS falhou e, portanto, a solicitação real nem mesmo é tentada. Por causa disso, o status 404 não seria apropriado.

Alguém precisa comprar uma cerveja para @joelnet . Isso salvou meu dia:

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

Outras pessoas podem ter problemas diferentes, mas funcionou para mim.

Estou recebendo este erro de forma intermitente. Suponho que não seja um problema CORS.
Minha API / servidor é um servidor .net.
Alguém mais enfrenta isso de forma intermitente?

Eu estava tendo este erro porque não estava especificando HTTP ou https. Principalmente o próprio código gera um erro no protocolo indefinido. Isso deve ser tratado ou em meta de erro, deve ser incluído.

Como @jonathan-stone disse, não acho que isso possa ser corrigido, porque o Axios simplesmente não sabe o que aconteceu. É como mandar seu amigo buscar Funyuns e ele diz que a loja foi fechada. Diz "sempre aberto" - por que a loja foi fechada. Eles fecharam para sempre (404)? Alguém está doente (500)? Eles ficaram sem estoque (503)? Ele não sabe, estão apenas fechados (erro de rede)!

Eu estava recebendo este erro ao disparar Axios em rápida sucessão em um servidor Express local tentando recuperar diferentes tipos de dados de minha API. Não é que o Axios não relatou um erro correto - não pode - meu servidor Express não respondeu com nada porque estava muito ocupado.

Se eu repetir a solicitação (usando retry-axios de # 164), posso obter os dados ou talvez um erro real se houver algo errado com o servidor DISPONÍVEL.

Para resolver o problema, você precisa especificar sempre
Nginx

add_header 'Access-Control-Allow-Origin' * sempre ;

Para resolver o problema, você precisa especificar sempre
Nginx

add_header 'Access-Control-Allow-Origin' * sempre ;

Não faça isso. Nunca faça isso. Você não desativaria seu firewall apenas para permitir a passagem de uma conexão.

Olá pessoal, configuramos a proteção do tamanho da entidade em nosso proxy, ele retorna um erro genérico, mas não consigo obter o código de status 413 ... de alguma forma, é possível?

Você já experimentou o objeto response ?
axios.get(url).then(stuff => console.log(Object.keys(stuff.response));

@ComputerCarl você acha que tem resposta de sucesso? Não pense assim, pois termina em catch mas posso tentar ...

Desculpa! Minha cabeça estava em outro lugar! Verifique o objeto de captura ...catch(err => console.log(Object.keys(err.response));

Axios doc

Eu tenho em um dos meus programas;
err.response.data.message;

que enviei do Expresso;

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 mas error.response é indefinido, o mesmo que error.status :) Você pode ver na imagem, eu já tenho em console.log . Apenas error.request é um objeto XMLHttpRequest, como você pode ver

Ok .. Não sei porque vocês estão recebendo dois erros (o 413 além do CORS). No entanto, se você estiver usando o Express, deverá habilitar o CORS;

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

Além disso, como afirmei acima , se o servidor rejeitar totalmente sua solicitação, o Axios não sabe o que causou o erro. Neste ponto, estou perplexo e você terá que esperar por alguém mais inteligente para responder. :-)

@ComputerCarl obrigado por tentar :-D CORS está bem, eu tenho muitas chamadas diferentes para a mesma API no aplicativo e isso funciona bem. Mesmo os erros retornados da API eu posso controlar facilmente. O problema é que este foi cancelado no nível de proxy.

Não sei se isso ajuda você, mas criei um aplicativo que fazia proxy de solicitações. A estrutura que eu estava usando estava engolindo o erro do Express. Finalmente, depois de encaminhar explicitamente o erro res.send({ message: messageFromProxy }); , consegui ver um erro e resolvê-lo no cliente.

Boa sorte.

@jonathan-stone disse, Erro de rede significa que o Axios não conseguiu se conectar ao seu servidor, então não pode obter nenhum código de erro do servidor.

pode ser que isso ajude alguém.

error.data ;

@ balwant-sd como você pode ver na captura de tela que enviei aqui , o navegador reconhece corretamente o código de status 413, mas axios não

Mesmo na guia de rede, posso ver o código de status 413 ...

Conforme mencionado acima, um POST de login que retorna um erro 401 retorna apenas 'Erro de rede' com código como indefinido em vez de 401.

Portanto, este erro parece ser um erro CORS mal configurado que reflete apenas na guia da rede. Tenho o mesmo problema que @ketysek e parece que meu ngnix não está aplicando o CORS para isso. Como mencionado anteriormente, um erro de rede genérico nunca chegará aos axios error.response . Aqui eu gosto de culpar o Backend .. oh espere, eu fiz isso ...

Olá, eu também estou tendo o mesmo problema, mesmo solicitando a obtenção de uma resposta adequada, os axios sempre retornam "Erro de rede" e vão para .catch (function (error) {}); par. alguém está tendo solução para este problema?

Eu tive o mesmo problema hoje. Esse problema é principalmente sobre o back-end não permitir solicitações HTTP entre sites de origens. No meu caso, estou usando django, então coloquei a classe corsheaders o mais alto possível no MIDDLEWARE:
MIDDLEWARE = [ 'corsheaders.middleware.CorsMiddleware', //..etc ]
E eu criei um CORS_ORIGIN_WHITELIST para permitir apenas certas origens:
CORS_ORIGIN_WHITELIST = [ "http://localhost:8081" , //..etc ]
Isso é para django-cors-headers. Se você não é um usuário django, você deve verificar a documentação do seu módulo de cabeçalhos cors favorito.

Como alguém disse em # 204, existem alguns casos em que é impossível detectar erros de rede no navegador, então o Axios responde com um erro genérico ( new Error('Network error') ). Se você quiser distingui-los de respostas ruins (código de status! == 2xx ou verificação personalizada), acho que a melhor maneira é apenas verificar a propriedade status em vez da mensagem de erro. Por exemplo:

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

Acho que definir um código de status personalizado seria uma má ideia (poderia causar mais confusão) e definir uma propriedade específica não ajudaria em nada, porque temos apenas um único caso de erro.

Claro que em Node.js é mais fácil porque você tem acesso ao erro real e pode verificar de acordo com a documentação do Node.js.

o problema com esta abordagem é digamos que executamos algum código em axios. então e o código tem algum erro, por exemplo "atribuição a constante" (que foi o meu caso), com a abordagem que você mencionou, obteremos erro de rede para " atribuição a constante "

exemplo de código:

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
  }
})

Eu uso esta função de utilitário para capturar erros de rede de baixo na pilha de chamadas (evita a identificação de erros não-axios como erros de rede):

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

Veja https://github.com/axios/axios/pull/1419

Eu uso esta função de utilitário para capturar erros de rede de baixo na pilha de chamadas (evita a identificação de erros não-axios como erros de rede):

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

Veja # 1419

Resolveu o problema
Obrigado

@mifi, você pode mostrar um exemplo mais detalhado de como está usando isNetworkError para evitar a identificação de erros não-axios como erros de rede?

Bem assim:

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

Se for um erro CORS e você usar sem servidor, isso pode corrigi-lo:

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'

Olá, alguém pode me ajudar, 'ERRO DE REDE':
https://stackoverflow.com/questions/58717673/axios-sending-network-error-while-status-is-200-ok

Quando o erro é "erro de rede", isso significa que o Axios não conseguiu se conectar ao seu servidor ou, por algum motivo, não obteve a resposta do seu servidor. Para que o erro 401 nunca chegue ao Axios. Talvez postar uma pergunta com algum código de amostra no StackOverflow?

Também estou recebendo o mesmo erro, Para mim, está chegando ao servidor e estou respondendo com 403 e um JSON, que resulta no Network Error no Axios

Consigo ver a resposta na guia de rede do navegador, mas no bloco de captura err.response é indefinido

@ narenderv7 eu também

@ WarisR Eu

Adicione no servidor 'Access-Control-Allow-Origin': '*'

@ketysek estou tendo o mesmo erro

você encontrou uma maneira de detectar este erro?

Oi pessoal, tenho o problema de erro CORS onde estava obtendo resposta com status 403 (4 * e 5 )Nginx enviando cabeçalho "Access-Control-Allow-Origin" apenas para status de resposta 2 e 3 *.

eu resolvo esse problema ao editar a configuração do nginx de:
add_header 'Access-Control-Allow-Origin' '*';
para:
add_header 'Access-Control-Allow-Origin' '*' always;

Eu tenho o mesmo problema, estou testando usando Axios 0.18.0 e 0.19.0

Passos:
Fiz uma solicitação com token expirado às vezes o error.response veio corretamente, mas às vezes a resposta do erro veio indefinida e a mensagem é 'Erro de rede'. Por que isso acontece é um erro de back-end ou um bug no axios?

Às vezes, pode ser causado pelos bloqueadores de AD em seu navegador ...
Experimente o modo incognito ou private ou baixe um novo navegador para testar ...

@ narenderv7 Sim, é um erro do lado do servidor. Mas acho que o Axios deve ser capaz de lidar com um erro desse caso, certo?

Preciso distinguir esses dois casos:

• POST https://xxx.com/sendMessage net :: ERR_NAME_NOT_RESOLVED
• POST https://xxx.com/sendMessage net :: ERR_INTERNET_DISCONNECTED

Como eu verifiquei. o retorno do erro pelo bloco catch é o mesmo em ambos os casos acima.

Ainda há um problema:
https://github.com/axios/axios/issues/1296

O erro ainda existe, se alguém tiver uma solução para este problema, compartilhe conosco.

Eu uso esta função de utilitário para capturar erros de rede de baixo na pilha de chamadas (evita a identificação de erros não-axios como erros de rede):

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

Veja # 1419

o erro de tempo limite também pode corresponder a essas condições.