Réception de « TypeError : Impossible d'obtenir » alors que la demande n'a pas réellement échoué

Question

J'utilise l'API fetch dans mon application React. L'application est déployée sur le serveur et fonctionne correctement. Je l'ai testé plusieurs fois. Cependant, l’application a soudainement cessé de fonctionner et je ne sais pas pourquoi. Le problème est que lorsque j'envoie la requête get, je reçois une réponse valide du serveur, mais l'API de récupération intercepte également l'exception et affiche TypeError: Failed to fetch ; Je n'ai même apporté aucune modification au code et c'est un problème avec tous les composants React.

J'ai reçu une réponse valide :

Mais j'obtiens également cette erreur :

fetch(url)
.then(res => res.json())
.then(données => {
  // fait quelque chose avec les données
})
.catch(rejeté => {
    console.log (rejeté);
});
Lorsque je supprime les informations d'identification : "inclure", cela fonctionne sur localhost mais pas sur le serveur. 
J'ai essayé toutes les solutions proposées sur StackOverflow et GitHub mais cela n'a pas fonctionné pour moi. 
            

Answer 1

Je sais qu'il peut y avoir des raisons spécifiques à React à ce problème, mais il est apparu en premier dans les résultats de recherche pour "Typeerror: Failed to fetch" et je voulais lister toutes les raisons possibles ici.

La spécification Fetch répertorie les cas où une TypeError est générée à partir de l'API Fetch : https://fetch.spec.whatwg.org/#fetch-api

Les paragraphes pertinents en janvier 2021 sont ci-dessous. Ce sont des extraits du texte.

4.6 Acquisition de réseau HTTP

Remplit les en-têtes de l'objet en-têtes en utilisant l'objet objet donné :

Les étapes de la méthode génèrent parfois des erreurs de type :

Dans la section "Body mixin", il existe plusieurs façons de générer une TypeError si vous utilisez FormData. Je ne les liste pas ici car cela rendrait cette réponse très longue. Passage pertinent : https://fetch.spec.whatwg.org/#body-mixin

Dans la section "Request Class", le nouveau constructeur Request(input, init) est un champ de mines d'erreurs de type potentielles :

En classe Réponse :

Dans la section "Obtenir des méthodes"

En plus de ces problèmes potentiels, certains comportements spécifiques au navigateur peuvent générer TypeError. Par exemple, si vous définissez keepalive sur true et que la charge utile est > 64 Ko, vous obtiendrez une TypeError sur Chrome, mais la même requête fonctionnera dans Firefox. Ces comportements ne sont pas documentés dans la spécification, mais vous pouvez rechercher des informations à leur sujet avec une recherche Google pour comprendre les limites de chaque option que vous définissez lors de la récupération.

Answer 2

Cela peut être un problème avec la réponse que vous recevez du backend. Si cela fonctionne correctement sur le serveur, le problème peut provenir des en-têtes de réponse.

Lorsque la vérification de l'en-tête de réponse Access-Control-Allow-Origin 的值。通常，当响应标头的 Access-Control-Allow-Origin ne correspond pas à la source de la requête, l'API de récupération générera une erreur non récupérable même si la réponse est reçue.