Axios: Définir un code/statut pour "Erreur réseau"

Je pense que tu as raison. Un code de statut aurait du sens.

Comme quelqu'un l'a dit dans #204, il y a des cas où il est impossible de détecter les erreurs de réseau dans le navigateur, donc Axios répond avec une erreur générique ( new Error('Network error') ). Si vous voulez les distinguer des mauvaises réponses (code d'état !== 2xx ou contrôle personnalisé), je pense que le meilleur moyen consiste simplement à vérifier la propriété status au lieu du message d'erreur. Par exemple:

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

Je pense que la définition d'un code de statut personnalisé serait une mauvaise idée (cela pourrait causer plus de confusion) et la définition d'une propriété spécifique n'aiderait pas du tout car nous n'avons qu'un seul cas d'erreur.

Bien sûr, dans Node.js, c'est plus facile car vous avez accès à l'erreur réelle et pouvez vérifier selon la documentation Node.js.

Ah, donc toute erreur émise par un appel Axios est garantie soit 1) d'avoir un statut, soit 2) d'être une erreur de réseau générique ? Je suppose que c'est assez bon.

Jusqu'à présent, je ne peux pas obtenir le code d'erreur comme 404 500 .., je reçois toujours une erreur réseau. Comment résoudre cela ?
instance.post('/foo', {request_id : 12345})
.then(fonction(réponse) {})
.catch(fonction(erreur){
console.log(erreur); // Erreur de réseau
console.log(error.status); // indéfini
console.log(error.code); // indéfini
});

Erreur réseau signifie qu'Axios n'a pas pu se connecter du tout à votre serveur, il ne peut donc obtenir aucun code d'erreur du serveur. Essayez-le peut-être avec un autre outil (curl, facteur ou navigateur) pour vous assurer de pouvoir vous y connecter ?

Je peux me connecter à mon serveur, il renvoie en fait un code d'erreur 404 et avec d'autres appels d'API, le serveur renvoie une erreur de serveur interne 500, mais je ne peux toujours pas obtenir le code d'erreur réseau via un script (c'est-à-dire console.log ( error.status); // undefined ).

C'est dans error.response.status .

J'ai ce problème. Quelqu'un peut-il m'aider s'il-vous-plaît?

La réponse du serveur est 401 mais axios me donne ceci :

erreur --> "Erreur réseau"
error.response --> non défini
error.status --> non défini

Lorsque l'erreur est "erreur réseau", cela signifie qu'Axios n'a pas pu se connecter à votre serveur ou, pour une raison quelconque, n'obtient pas la réponse de votre serveur. Donc, cette erreur 401 n'apparaît jamais dans Axios. Peut-être poster une question avec un exemple de code sur StackOverflow ?

J'ai rencontré cela lors de l'utilisation d'AWS API-Gateway. Pour tous ceux qui voient les mêmes problèmes, il s'agit d'un problème d'erreurs 4xx (dans mon cas, un 401) ne répondant pas avec les en-têtes CORS. J'ai passé des heures à résoudre ce foutu problème ! Merci @jonathan-stone d'avoir orienté mon dépannage dans le bon sens.

@codygreen J'ai toujours ces problèmes et je suis tombé sur ce https://forums.aws.amazon.com/message.jspa?messageID=763752

Avez-vous trouvé une solution de contournement ?

Quelqu'un a-t-il des solutions à ce problème ?

Mon problème était avec Jest + Axios. Je l'ai résolu en ajoutant ceci à mon package.json :

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

Cela fonctionne, même si je n'arrive pas à trouver de documentation pour le soutenir. Je suppose que error.response doit être vide sur une erreur de réseau, sinon c'est une erreur d'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
  }
});

Quelqu'un a-t-il trouvé une meilleure solution à ce sujet? Les gens d'Axios font du bruit :(

J'ai aussi eu cette erreur aujourd'hui, je ne sais pas quel est le problème, voici mon script :

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

http://localhost :8000/ renvoie une réponse JSON, cela ne fonctionne pas sur les autres hôtes

Il peut s'agir d'une erreur Cors.

Ligne 87, elle a été définie sur 'Erreur réseau' dans l'adaptateur xhr ? comment changer cela pour que l'erreur puisse être détectée ?
https://github.com/axios/axios/blob/d7f021b8d4cc50bfa0653011bc02452d234d1255/lib/adapters/xhr.js#L84 -L91

Mon mauvais, ce n'est pas un problème mais un comportement attendu en raison de la sécurité du navigateur. Les réponses d'erreur XHR reçoivent désormais un ProgressEvent sur les codes d'état d'erreur.

J'ai le même problème. Je crois que c'est un problème avec le CORS. Quelqu'un a-t-il trouvé une bonne solution pour cela?

@codygreen avez-vous réussi à résoudre votre problème avec API Gateway ? Je ne peux même pas comprendre le code d'état de la réponse pour m'aider à déboguer davantage.

Même problème général ici. Pour moi, c'était définitivement CORS. Le navigateur faisait des requêtes OPTIONS au serveur et je n'avais pas de configuration de gestionnaire pour eux (dans le nœud). Axios terminerait la demande (en échec) avec succès mais avec une réponse indéfinie

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

Quel est votre code de réponse de la réponse? s'il s'agit d'une erreur réseau, lors de l'utilisation de l'API Fetch, les navigateurs la consigneront dans la console mais ne la transmettront pas à JavaScript pour des raisons de sécurité, le corps est donc vide. Voir FETCH STANDERS , si vous souhaitez accéder aux erreurs réseau de la réponse, modifiez le code de réponse HTTP en 200 et incluez le message d'erreur dans le corps de la réponse.

Mon problème était un problème de DNS. Cela a fonctionné dans le facteur mais a échoué dans axios. J'ai essayé une boucle pour découvrir qu'elle échouait également là-bas. Mon DNS n'a donc pas été configuré correctement. Vérifiez si vous rencontrez ce problème.

Je ne sais pas si cela s'applique à d'autres cas, mais voici comment j'ai résolu ce même problème (étant donné que nous parlons de CORS ).

Côté Frontend , assurez-vous de passer le headers en paramètre dans vos requêtes PUT ou POST :

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

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

Et du côté du backend , assurez-vous que vous utilisez CORS avec Express :

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

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

Réfs : ici et ici .

Les gars, j'ai aussi du mal à résoudre ce problème pendant un certain temps. Mais j'ai résolu le problème de mon axios post network createError sur un appareil Android maintenant. La raison de l'erreur réseau axios est que les données de formulaire que j'ai transmises à axios contiennent un type d'objet de données incorrect, je suppose. J'ai inclus un objet image (objet ImagePicker d'Expo) en tant que paramètre de données de formulaire qui n'est pas accepté par axios, je pense. Axios peut uniquement recevoir string, float, int ou image comme paramètre. l'image ne peut pas passer en tant que param, ce n'est pas un type d'image, c'est un objet natif de réaction, je l'ai supprimé et j'ai inclus un champ d'image en tant que paramètre en affectant image.uri à la valeur de param, puis cela fonctionne. J'espère que cela aidera certaines des personnes qui pourraient rencontrer le même problème que celui auquel j'étais confronté auparavant.
En supprimant certaines de vos données de formulaire une par une lorsque vous testez une erreur réseau axios, vous découvrirez laquelle est la cause du problème.

~ @codygreen @hammadzz avez-vous trouvé une solution à cela avec Amazon API Gateway ?~

Mise à jour : si quelqu'un tombe dessus avec API Gateway et CORS, vous devrez ajouter un en-tête de réponse access-control-allow-origin à vos réponses.

Comme quelqu'un l'a dit dans #204, il y a des cas où il est impossible de détecter les erreurs de réseau dans le navigateur, donc Axios répond avec une erreur générique ( new Error('Network error') ). Si vous voulez les distinguer des mauvaises réponses (code d'état !== 2xx ou contrôle personnalisé), je pense que le meilleur moyen consiste simplement à vérifier la propriété status au lieu du message d'erreur. Par exemple:

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

Je pense que la définition d'un code de statut personnalisé serait une mauvaise idée (cela pourrait causer plus de confusion) et la définition d'une propriété spécifique n'aiderait pas du tout car nous n'avons qu'un seul cas d'erreur.

Bien sûr, dans Node.js, c'est plus facile car vous avez accès à l'erreur réelle et pouvez vérifier selon la documentation Node.js.

Si vous venez de Google, notez que cette API est obsolète. Il s'agit de 2016, v <0,13.

Vous voulez vérifier error.response lorsque le serveur répond, error.response === undefined pour le statut hors ligne et le cas spécial de error.code === 'ECONNABORTED' pour les délais d'attente.

Mise à jour : si quelqu'un tombe dessus avec API Gateway et CORS, vous devrez ajouter un en-tête de réponse à vos réponses :

access-control-allow-origin: *

Ne faites surtout pas ça. Définissez les origines en conséquence au lieu de * .

Pour moi, c'était un problème de cors, si vous utilisez laravel et que vous définissez un

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

vous devez ajouter tous les autres middleware dont vous avez besoin à cette route explicitement, ce n'est pas hérité

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

J'ai également rencontré ce problème, utilisez votre adresse IP locale au lieu de localhost (par exemple 10.0.0.12:8083 ). ça a marché pour moi.

Donc, si j'ai le bon, le statut 0 d'une requête axios semble apparaître dans certains cas. mais il ne peut pas être déterminé par programme exactement dans quel cas il est rencontré.

Ces cas incluent l'échec d'une demande de contrôle en amont CORS et, par conséquent, la demande réelle n'est même jamais tentée. Pour cette raison, le statut 404 ne serait pas approprié.

Quelqu'un doit acheter une bière à @joelnet . Cela m'a sauvé la journée :

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

D'autres personnes peuvent avoir des problèmes différents, mais cela a fonctionné pour moi.

Je reçois cette erreur par intermittence. Je suppose que ce n'est pas un problème CORS.
Mon api/serveur est un serveur .net.
Quelqu'un d'autre fait face à cela par intermittence ?

J'avais cette erreur parce que je ne spécifiais pas HTTP ou https. Le code lui-même génère principalement une erreur sur le protocole non défini. Cela devrait être géré ou en erreur meta, il devrait être inclus.

Comme l'a dit @jonathan-stone, je ne pense pas que cela puisse être rectifié, car Axios ne sait tout simplement pas ce qui s'est passé. C'est comme envoyer votre ami à Funyuns et il dit que le magasin était fermé. Il est écrit "toujours ouvert" - pourquoi le magasin a-t-il été fermé. Ont-ils fermé pour de bon (404)? Quelqu'un est-il malade (500) ? Est-ce qu'ils ont épuisé leur stock (503) ? Il ne sait pas, ils sont juste fermés (erreur de réseau) !

J'obtenais cette erreur lors du tir rapide d'Axios contre un serveur Express local essayant de récupérer différents types de données à partir de mon API. Ce n'est pas qu'Axios n'a pas signalé une erreur correcte - il ne le peut pas - mon serveur Express n'a rien répondu car il était trop occupé.

Si je réessaye la demande (en utilisant retry-axios de #164 ), je peux obtenir les données ou peut-être une erreur réelle s'il y a un problème avec le serveur DISPONIBLE.

Pour résoudre le problème, vous devez toujours spécifier
Nginx

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

Pour résoudre le problème, vous devez toujours spécifier
Nginx

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

Ne fais pas ça. Ne faites

Salut les gars, nous avons configuré la protection de la taille de l'entité sur notre proxy, il renvoie une erreur générique mais je ne parviens pas à obtenir le code d'état 413 ... est-ce possible?

Avez-vous essayé l'objet response ?
axios.get(url).then(stuff => console.log(Object.keys(stuff.response));

@ComputerCarl pensez-vous qu'il a une réponse réussie ? Ne pensez pas car cela se termine par catch mais je peux l'essayer ...

Désolé! Ma tête était ailleurs ! Vérifiez l'objet catch ...catch(err => console.log(Object.keys(err.response));

Doc Axios

J'ai dans l'un de mes programmes ;
err.response.data.message;

que j'ai envoyé d'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 mais error.response n'est pas défini, comme error.status :) Vous pouvez le voir sur la capture d'écran, je l'ai déjà dans console.log . Seul error.request est un objet XMLHttpRequest, comme vous pouvez le voir

Ok.. Je ne sais pas pourquoi vous obtenez deux erreurs (le 413 en plus du CORS). Cependant, si vous utilisez Express, vous devez activer CORS ;

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

De plus, comme je l'ai indiqué ci -

@ComputerCarl merci d'avoir essayé :-D CORS va bien, j'ai beaucoup d'appels différents à la même API dans l'application et cela fonctionne bien. Même les erreurs renvoyées par l'API, je peux facilement gérer. Le problème est que ce seul est annulé au niveau du proxy.

Je ne sais pas si cela vous aide, mais j'avais créé une application qui faisait des requêtes proxy. Le framework que j'utilisais engloutissait l'erreur Express. Enfin, après avoir explicitement transmis l'erreur res.send({ message: messageFromProxy }); , j'ai pu voir une erreur et la traiter sur le client.

Bonne chance.

@jonathan-stone a déclaré que l'erreur réseau signifie qu'Axios n'a pas pu se connecter du tout à votre serveur, il ne peut donc obtenir aucun code d'erreur du serveur.

peut-être que cela aidera quelqu'un.

error.data ;

@balwant-sd comme vous pouvez le voir sur la capture d'écran que j'ai envoyée ici , le navigateur reconnaît correctement le code d'état 413, mais pas axios

Même dans l'onglet réseau, je peux voir le code d'état 413...

Comme mentionné ci-dessus, un POST de connexion qui renvoie une erreur 401 renvoie simplement une « Erreur réseau » avec le code non défini au lieu de 401.

Cette erreur semble donc être une erreur CORS mal configurée qui se reflète uniquement sur votre onglet réseau. J'ai le même problème que @ketysek , et il semble que mon ngnix n'applique pas CORS pour cela. Comme mentionné précédemment, une erreur de réseau générique n'apparaîtra jamais dans axios error.response . Ici, j'aime blâmer le Backend .. oh attendez, j'ai fait ça ...

Bonjour, j'ai également le même problème, même la demande d'obtention d'une réponse appropriée, les axios renvoient toujours "Erreur réseau" et vont à .catch (fonction (erreur) {}); par. est-ce que quelqu'un a une solution à ce problème ?

J'ai eu le même problème aujourd'hui. Ce problème concerne principalement le backend qui n'autorise pas les requêtes HTTP intersites d'origine. Dans mon cas, j'utilise django donc j'ai juste placé la classe corsheaders le plus haut possible dans le MIDDLEWARE :
MIDDLEWARE = [ 'corsheaders.middleware.CorsMiddleware', //..etc ]
Et j'ai créé une CORS_ORIGIN_WHITELIST pour n'autoriser que certaines origines :
CORS_ORIGIN_WHITELIST = [ "http://localhost:8081" , //..etc ]
Ceci est pour les en-têtes django-cors. Si vous n'êtes pas un utilisateur de Django, vous devriez consulter la documentation de votre module d'en-têtes cors préféré.

Comme quelqu'un l'a dit dans #204, il y a des cas où il est impossible de détecter les erreurs de réseau dans le navigateur, donc Axios répond avec une erreur générique ( new Error('Network error') ). Si vous voulez les distinguer des mauvaises réponses (code d'état !== 2xx ou contrôle personnalisé), je pense que le meilleur moyen consiste simplement à vérifier la propriété status au lieu du message d'erreur. Par exemple:

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

Je pense que la définition d'un code de statut personnalisé serait une mauvaise idée (cela pourrait causer plus de confusion) et la définition d'une propriété spécifique n'aiderait pas du tout car nous n'avons qu'un seul cas d'erreur.

Bien sûr, dans Node.js, c'est plus facile car vous avez accès à l'erreur réelle et pouvez vérifier selon la documentation Node.js.

le problème avec cette approche est que nous exécutons du code dans axios.then et que le code contient une erreur, par exemple "affectation à une constante" (ce qui était mon cas), avec l'approche que vous avez mentionnée, nous obtiendrons une erreur de réseau pour " affectation à la constante"

exemple de code :

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

J'utilise cette fonction utilitaire pour détecter les erreurs réseau du bas de la pile d'appels (empêche d'identifier les erreurs non axios comme des erreurs réseau):

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

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

J'utilise cette fonction utilitaire pour détecter les erreurs réseau du bas de la pile d'appels (empêche d'identifier les erreurs non axios comme des erreurs réseau):

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

Voir #1419

Résolu le problème
Merci

@mifi pouvez-vous montrer un exemple plus détaillé de la façon dont vous utilisez isNetworkError pour éviter d'identifier les erreurs non axios comme des erreurs de réseau ?

Juste comme ça:

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

S'il s'agit d'une erreur CORS et que vous utilisez Serverless, cela peut résoudre le problème :

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'

bonjour, quelqu'un peut-il m'aider, 'ERREUR DE RESEAU' :
https://stackoverflow.com/questions/58717673/axios-sending-network-error-while-status-is-200-ok

Lorsque l'erreur est "erreur réseau", cela signifie qu'Axios n'a pas pu se connecter à votre serveur ou, pour une raison quelconque, n'obtient pas la réponse de votre serveur. Donc, cette erreur 401 n'apparaît jamais dans Axios. Peut-être poster une question avec un exemple de code sur StackOverflow ?

J'obtiens également la même erreur, pour moi, il atteint le serveur et je réponds avec 403 et un JSON, ce qui entraîne le Network Error dans l'Axios

Je peux voir la réponse dans l'onglet réseau du navigateur, mais dans le bloc catch err.response n'est pas défini

@narenderv7 moi aussi

@WarisR J'ai corrigé ce

Ajouter dans le serveur 'Access-Control-Allow-Origin': '*'

@ketysek j'ai la même erreur

avez-vous trouvé un moyen d'attraper cette erreur?

Salut les gars, j'ai un problème d'erreur CORS où j'obtenais une réponse avec le statut 403 (4 * & 5 )En-tête d'envoi Nginx "Access-Control-Allow-Origin" uniquement pour les états de réponse 2 et 3 *.

je résous ce problème, modifiez la configuration nginx à partir de :
add_header 'Access-Control-Allow-Origin' '*';
à:
add_header 'Access-Control-Allow-Origin' '*' always;

J'ai le même problème, je le teste en utilisant axios 0.18.0 et 0.19.0

Pas:
J'ai fait une demande avec un jeton expiré, parfois la réponse error.response est arrivée correctement, mais parfois la réponse d'erreur n'est pas définie et le message est « Erreur de réseau ». Pourquoi cela se produit-il, c'est une erreur de backend ou un bogue dans axios ?

Parfois, cela peut être causé par les bloqueurs d'AD dans votre navigateur ...
Essayez le mode incognito ou private , ou téléchargez un nouveau navigateur pour tester ...

@ narenderv7 Oui, c'est une erreur côté serveur. Mais je pense qu'Axios devrait être capable de gérer une erreur de ce cas, non?

Je dois distinguer ces deux cas :

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

Comme j'ai vérifié. le retour d'erreur par le bloc catch est le même dans les deux cas ci-dessus.

Il y a encore un problème :
https://github.com/axios/axios/issues/1296

L'erreur existe toujours, si quelqu'un a une solution à ce problème, partagez-la avec nous s'il vous plaît.

J'utilise cette fonction utilitaire pour détecter les erreurs réseau du bas de la pile d'appels (empêche d'identifier les erreurs non axios comme des erreurs réseau):

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

Voir #1419

l'erreur de délai d'attente peut également correspondre à ces conditions.