--- title: "Corriger l’erreur Failed to fetch et distinguer ses 3 causes" description: "TypeError: Failed to fetch signifie que la requête n’a reçu aucune réponse HTTP. Un en-tête CORS manquant, un serveur arrêté et un hôte qui n’existe pas donnent tous ce même message." canonical: "https://logbrew.co/fr/errors/failed-to-fetch" last_updated: "2026-11-10" --- # Corriger l’erreur Failed to fetch et distinguer ses 3 causes `TypeError: Failed to fetch` signifie que la requête n’a reçu aucune réponse HTTP. Un en-tête CORS manquant, un serveur arrêté et un hôte qui n’existe pas donnent tous ce même message. Testé le 10 novembre 2026 avec Chromium 152, @logbrew/browser 0.1.21 et @logbrew/sdk 0.1.44 Par [Furkan Erday](https://github.com/furkanerday). Furkan Erday est le fondateur de LogBrew. Il développe LogBrew avec Claude Code et Codex tous les jours. Canonical: https://logbrew.co/fr/errors/failed-to-fetch ## Ce qui nomme la cause d’un `fetch()` en échec | Ce qui a mal tourné | `error.message` | Ligne de console | | --- | --- | --- | | Aucun en-tête `Access-Control-Allow-Origin` | `Failed to fetch` | Politique CORS | | Rien n’écoute sur le port | `Failed to fetch` | `ERR_CONNECTION_REFUSED` | | L’hôte n’a aucun enregistrement DNS | `Failed to fetch` | `ERR_NAME_NOT_RESOLVED` | | Le serveur a répondu 500 | Pas de rejet | `500` | 4 requêtes vers une API sur une autre origine. Une chope pleine signifie que le texte nomme la cause. ## Trouver quelle cause vous avez ### Ouvrez la console du navigateur `fetch()` rejette avec le même `TypeError: Failed to fetch` pour chaque échec réseau. La ligne de console juste à côté nomme la vraie cause. ### L’API a répondu sans en-tête CORS La console dit `blocked by CORS policy`. Le serveur a bien répondu, mais l’origine de la page n’a pas le droit de lire la réponse, donc le navigateur la jette. Sortie ```text Access to fetch at 'http://127.0.0.1:4874/api/closed' from origin 'http://127.0.0.1:4873' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. ``` ### Rien n’écoute sur cet hôte et ce port La console dit `net::ERR_CONNECTION_REFUSED`. L’API ne tourne pas, ou le port dans l’URL est faux. Démarrez-la, puis vérifiez le port. Sortie ```text Failed to load resource: net::ERR_CONNECTION_REFUSED ``` ### Le nom d’hôte ne se résout pas La console dit `net::ERR_NAME_NOT_RESOLVED`. Le DNS n’a aucun enregistrement pour cet hôte. Vérifiez le nom d’hôte pour une faute de frappe, et la variable d’environnement qui contient l’URL de l’API sur ce déploiement. Sortie ```text Failed to load resource: net::ERR_NAME_NOT_RESOLVED ``` ## Corriger dans votre code ### Envoyez l’en-tête CORS depuis l’API Répondez avec `Access-Control-Allow-Origin` réglé sur l’origine de votre page, ou `*` pour une API publique. Dans notre test, le même endpoint est passé de `Failed to fetch` à `HTTP 200` avec ce seul en-tête ajouté. ```bash Access-Control-Allow-Origin: https://app.example.com ``` ### Vérifiez le statut, car un 500 ne rejette pas `fetch()` se résout sur toute réponse HTTP, y compris 404 et 500. Dans notre test, un 500 avec le corps `{"error":"tap jammed"}` est arrivé dans la branche `then`, pas dans le `catch`. Testez `response.ok` avant de lire le corps. ```bash const response = await fetch(url); if (!response.ok) throw new Error(`HTTP ${response.status} for ${url}`); ``` ### Enregistrez l’URL avec l’erreur Un `fetch()` rejeté n’a pas de réponse, et sa stack trace pointe vers votre propre code, pas vers la cause. Attrapez-le là où vous appelez `fetch()` et gardez la méthode et l’URL avec l’erreur, pour que votre suivi des erreurs montre quelle requête a échoué. ```bash try { return await fetch(url); } catch (error) { console.error("fetch failed", url, error); throw error; } ``` ## Ce que nous avons vu en testant La page tournait sur `http://127.0.0.1:4873` dans Chromium 152 avec `@logbrew/browser` 0.1.21 et son instrumentation fetch installée. Une API sur `http://127.0.0.1:4874` répondait à 3 chemins, et nous avons envoyé 5 requêtes sans `catch`, donc chaque rejet est arrivé au SDK comme un rejet non géré. `/api/closed` a répondu 200 sans en-tête CORS, et la requête a été rejetée avec `TypeError: Failed to fetch`. Une requête vers le port 4875, où rien n’écoutait, et une vers `http://keg.invalid/api` ont été rejetées avec la même erreur. Dans les 3 cas, `error.message` valait `Failed to fetch`, `error.name` valait `TypeError`, et la stack trace pointait vers notre propre appel à `fetch()`. La console les distinguait. La première disait `blocked by CORS policy`, la deuxième `net::ERR_CONNECTION_REFUSED`, la troisième `net::ERR_NAME_NOT_RESOLVED`. `/api/broken`, qui a répondu 500 avec l’en-tête, n’a pas rejeté du tout, et `/api/open`, qui a répondu 200 avec l’en-tête, a donné `HTTP 200 {"ok":true}`. ## Pourquoi chaque cause a le même message Le standard Fetch transforme chaque échec avant une réponse en 1 seule chose, une erreur réseau, qui est une réponse de type `error` avec le statut 0. Un échec CORS en est une aussi. En mode `cors`, une ressource qui ne comprend pas le protocole CORS donne une erreur réseau. La méthode `fetch()` rejette sa promesse avec un `TypeError` pour une erreur réseau, et pour rien d’autre. MDN le dit de la même façon. La promesse ne rejette que si la requête échoue, par exemple sur une URL mal formée ou une erreur réseau, et pas sur un statut HTTP comme 404 ou 504. La page MDN sur les erreurs CORS dit que les détails d’une requête CORS en échec ne sont pas accessibles à JavaScript pour des raisons de sécurité, et que la console est le seul endroit où les trouver. whatwg/fetch#526 demande des types d’erreur plus parlants depuis 2017 et est toujours ouvert. ## Ce que LogBrew enregistre Chaque rejet est arrivé comme 1 problème nommé `Unhandled promise rejection: TypeError`, avec des frames de stack trace dans notre bundle et la clé de regroupement `browser.unhandledrejection:TypeError:/app.js`. Cela vous dit où vous avez appelé `fetch()`, pas ce qui a échoué. L’instrumentation fetch a ajouté un span dans la même trace, `browser.fetch GET /api/closed`, avec le statut `error`, la méthode, le chemin de la requête et `errorType` `TypeError`. Le span nomme la requête qui a échoué même si l’erreur ne le fait pas. La réponse 500 n’a produit aucun problème, seulement un span avec le statut `error` et `statusCode` 500. La réponse 200 a produit un span avec le statut `ok`. Donc dans LogBrew, un 500 et un échec réseau sont 2 spans différents, alors que dans votre code seul le second atteint le `catch`. ## Questions fréquentes ### Que signifie TypeError Failed to fetch ? Le navigateur n’a pas pu obtenir de réponse HTTP pour un appel à `fetch()`. Le serveur était injoignable, l’hôte ne s’est pas résolu, ou CORS a bloqué la réponse. Le message est le même dans les 3 cas. ### Failed to fetch est-il toujours une erreur CORS ? Non. Dans notre test, un en-tête CORS manquant, un port sans serveur et un hôte sans enregistrement DNS ont tous donné ce message. Seule la ligne de console juste à côté nomme la cause. ### Pourquoi fetch ne rejette-t-il pas sur un 404 ou un 500 ? Le standard Fetch ne rejette que pour une erreur réseau. Une réponse HTTP avec n’importe quel statut est une réponse, donc `fetch()` se résout et vous testez `response.ok` vous-même. ### Comment attraper Failed to fetch en JavaScript ? Enveloppez l’appel dans `try` et `catch`, ou ajoutez `.catch()` à la promesse. L’erreur est un `TypeError` sans réponse, donc enregistrez l’URL et la méthode vous-même. ### Failed to fetch signifie-t-il que le serveur est arrêté ? Parfois. Un serveur arrêté donne `net::ERR_CONNECTION_REFUSED` dans la console. Le même `Failed to fetch` vient aussi d’un en-tête CORS manquant ou d’un nom d’hôte sans enregistrement DNS. ## Voyez quelle requête a échoué, et pourquoi Le SDK navigateur de LogBrew enregistre chaque `fetch()` comme un span avec sa méthode, son chemin et son statut, dans la même trace que l’erreur qu’il a levée. Commencez avec le généreux forfait Free, sans carte bancaire. [Commencer gratuitement](https://logbrew.co/fr) ## Sources - [MDN, Window: fetch() method](https://developer.mozilla.org/en-US/docs/Web/API/Window/fetch) - [MDN, CORS errors](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS/Errors) - [Fetch Standard, The fetch() method](https://fetch.spec.whatwg.org/#fetch-method) - [whatwg/fetch#526](https://github.com/whatwg/fetch/issues/526) ## D’autres correctifs d’erreurs JavaScript - [Corriger l’erreur de script qui cache son message, son fichier et sa ligne](https://logbrew.co/fr/errors/script-error) - [Les erreurs JavaScript que nous avons reproduites, et comment corriger chacune](https://logbrew.co/fr/errors)