Comment résoudre l'erreur TypeError: failed to fetch alors qu'une requête est valide ?
Le langage JavaScript a connu au cours de sa vie différentes normes qui ont ajouté de nouvelles possibilités au langage. Parmi celles-ci, la norme "Fetch" a introduit la fonction du même nom dans le langage. La fonction "fetch" permet d'effectuer un appel AJAX en utilisant les promesses. On peut donc ensuite gérer le résultat avec les méthodes "then()" and "catch()". Cette méthode permet une écriture plus facile des requêtes qu'avec l'ancienne API "XMLHttpRequest". La notation est d'ailleurs inspirée de la librairie "Axios". Si vous obtenez le message "TypeError: failed to fetch", il s'agit d'un problème lié au paramétrage de votre requête.
La première chose à vérifier, surtout si votre requête a déjà fonctionné sur un autre serveur, est les entêtes d'origine. La première vérification effectuée par l'API "fetch()" est l'entête "Access-Control-Allow-Origin" (ACAO) situé dans la réponse du serveur qui reçoit la requête. Cet entête détermine quels sont les domaines autorisés par le serveur à effectuer des requêtes. L'API va le comparer avec le domaine d'origine de la requête. Si la vérification n'est pas bonne, alors la requête va échouer. Vous devez dans ce cas modifier le paramétrage de votre serveur afin d'ajuster l'entête ACAO.
Si cette vérification est bonne, il existe d'autres causes possibles d'erreurs. Il est recommandé alors de consulter la documentation de l'API pour vérifier les causes d'erreur possible et corriger son code : https://fetch.spec.whatwg.org/#fetch-api.