--- title: "De fout Failed to fetch oplossen en de 3 oorzaken uit elkaar houden" description: "TypeError: Failed to fetch betekent dat het request geen HTTP-antwoord kreeg. Een ontbrekende CORS-header, een server die plat ligt en een host die niet bestaat geven allemaal dezelfde melding." canonical: "https://logbrew.co/nl/errors/failed-to-fetch" last_updated: "2026-11-10" --- # De fout Failed to fetch oplossen en de 3 oorzaken uit elkaar houden `TypeError: Failed to fetch` betekent dat het request geen HTTP-antwoord kreeg. Een ontbrekende CORS-header, een server die plat ligt en een host die niet bestaat geven allemaal dezelfde melding. Getest op 10 november 2026 met Chromium 152, @logbrew/browser 0.1.21 en @logbrew/sdk 0.1.44 Door [Furkan Erday](https://github.com/furkanerday). Furkan Erday is de oprichter van LogBrew. Hij bouwt LogBrew elke dag met Claude Code en Codex. Canonical: https://logbrew.co/nl/errors/failed-to-fetch ## Wat de oorzaak van een mislukte `fetch()` noemt | Wat er misging | `error.message` | Console | | --- | --- | --- | | Geen `Access-Control-Allow-Origin`-header | `Failed to fetch` | CORS-policy | | Niets luistert op de poort | `Failed to fetch` | `ERR_CONNECTION_REFUSED` | | De host heeft geen DNS-record | `Failed to fetch` | `ERR_NAME_NOT_RESOLVED` | | De server antwoordde 500 | Geen reject | `500` | 4 requests naar een API op een andere origin. Een volle mok betekent dat de tekst de oorzaak noemt. ## Zoek uit welke oorzaak je hebt ### Open de browserconsole `fetch()` faalt met dezelfde `TypeError: Failed to fetch` bij elke netwerkfout. De consoleregel ernaast noemt de echte oorzaak. ### De API antwoordde zonder CORS-header De console zegt `blocked by CORS policy`. De server antwoordde wel, maar de origin van de pagina mag het antwoord niet lezen, dus de browser gooit het weg. Uitvoer ```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. ``` ### Niets luistert op die host en poort De console zegt `net::ERR_CONNECTION_REFUSED`. De API draait niet, of de poort in de URL klopt niet. Start hem, en controleer dan de poort. Uitvoer ```text Failed to load resource: net::ERR_CONNECTION_REFUSED ``` ### De hostnaam bestaat niet in DNS De console zegt `net::ERR_NAME_NOT_RESOLVED`. DNS heeft geen record voor de host. Controleer de hostnaam op een typefout, en de omgevingsvariabele met de API-URL op deze deploy. Uitvoer ```text Failed to load resource: net::ERR_NAME_NOT_RESOLVED ``` ## Los het op in je code ### Stuur de CORS-header vanaf de API Antwoord met `Access-Control-Allow-Origin` gezet op de origin van je pagina, of `*` voor een publieke API. In onze test ging hetzelfde endpoint van `Failed to fetch` naar `HTTP 200` met alleen die header erbij. ```bash Access-Control-Allow-Origin: https://app.example.com ``` ### Controleer de status, want een 500 faalt niet `fetch()` slaagt bij elk HTTP-antwoord, ook 404 en 500. In onze test kwam een 500 met de body `{"error":"tap jammed"}` in de `then`-tak terecht, niet in de `catch`. Test `response.ok` voordat je de body leest. ```bash const response = await fetch(url); if (!response.ok) throw new Error(`HTTP ${response.status} for ${url}`); ``` ### Log de URL met de fout Een mislukte `fetch()` heeft geen antwoord, en zijn stacktrace wijst naar je eigen code, niet naar de oorzaak. Vang hem op waar je `fetch()` aanroept en bewaar de methode en URL bij de fout, zodat je foutopsporing laat zien welk request mislukte. ```bash try { return await fetch(url); } catch (error) { console.error("fetch failed", url, error); throw error; } ``` ## Wat we zagen in onze test De pagina draaide op `http://127.0.0.1:4873` in Chromium 152 met `@logbrew/browser` 0.1.21 en zijn fetch-instrumentatie geïnstalleerd. Een API op `http://127.0.0.1:4874` beantwoordde 3 paden, en we stuurden 5 requests zonder `catch`, zodat elke mislukking de SDK bereikte als onafgehandelde rejection. `/api/closed` antwoordde 200 zonder CORS-header, en het request faalde met `TypeError: Failed to fetch`. Een request naar poort 4875, waar niets luisterde, en een naar `http://keg.invalid/api` faalden met dezelfde fout. In alle 3 gevallen was `error.message` `Failed to fetch`, was `error.name` `TypeError`, en wees de stacktrace naar onze eigen `fetch()`-aanroep. De console hield ze uit elkaar. De eerste zei `blocked by CORS policy`, de tweede `net::ERR_CONNECTION_REFUSED`, de derde `net::ERR_NAME_NOT_RESOLVED`. `/api/broken`, dat 500 antwoordde met de header, faalde helemaal niet, en `/api/open`, dat 200 antwoordde met de header, gaf `HTTP 200 {"ok":true}`. ## Waarom elke oorzaak dezelfde melding heeft De Fetch Standard maakt van elke mislukking vóór een antwoord 1 ding, een netwerkfout, en dat is een antwoord met type `error` en status 0. Een CORS-fout is er ook een. In `cors`-modus geeft een resource die het CORS-protocol niet begrijpt een netwerkfout. De methode `fetch()` laat zijn promise falen met een `TypeError` bij een netwerkfout, en bij niets anders. MDN zegt het net zo. De promise faalt alleen als het request mislukt, bijvoorbeeld bij een slecht gevormde URL of een netwerkfout, en niet bij een HTTP-status zoals 404 of 504. De MDN-pagina over CORS-fouten zegt dat de details van een mislukt CORS-request om veiligheidsredenen niet beschikbaar zijn voor JavaScript, en dat de console de enige plek is om ze te vinden. whatwg/fetch#526 vraagt sinds 2017 om informatievere fouttypes en staat nog open. ## Wat LogBrew vastlegt Elke rejection kwam binnen als 1 issue met de naam `Unhandled promise rejection: TypeError`, met stackframes in onze bundle en de groeperingssleutel `browser.unhandledrejection:TypeError:/app.js`. Dat zegt waar je `fetch()` aanriep, niet wat er mislukte. De fetch-instrumentatie voegde een span toe in dezelfde trace, `browser.fetch GET /api/closed`, met status `error`, de methode, het requestpad en `errorType` `TypeError`. De span noemt het mislukte request, ook al doet de fout dat niet. Het 500-antwoord gaf geen issue, alleen een span met status `error` en `statusCode` 500. Het 200-antwoord gaf een span met status `ok`. In LogBrew zijn een 500 en een netwerkfout dus 2 verschillende spans, terwijl in je code alleen de tweede de `catch` bereikt. ## Veelgestelde vragen ### Wat betekent TypeError Failed to fetch? De browser kreeg geen HTTP-antwoord voor een `fetch()`-aanroep. De server was onbereikbaar, de host was niet te vinden, of CORS blokkeerde het antwoord. De melding is in alle 3 gevallen hetzelfde. ### Is Failed to fetch altijd een CORS-fout? Nee. In onze test gaven een ontbrekende CORS-header, een poort zonder server en een host zonder DNS-record allemaal deze melding. Alleen de consoleregel ernaast noemt de oorzaak. ### Waarom faalt fetch niet bij een 404 of 500? De Fetch Standard faalt alleen bij een netwerkfout. Een HTTP-antwoord met welke status ook is een antwoord, dus `fetch()` slaagt en je test zelf `response.ok`. ### Hoe vang ik Failed to fetch op in JavaScript? Zet de aanroep in `try` en `catch`, of voeg `.catch()` toe aan de promise. De fout is een `TypeError` zonder antwoord, dus log zelf de URL en de methode. ### Betekent Failed to fetch dat de server plat ligt? Soms. Een server die plat ligt geeft `net::ERR_CONNECTION_REFUSED` in de console. Dezelfde `Failed to fetch` komt ook van een ontbrekende CORS-header of een hostnaam zonder DNS-record. ## Zie welk request mislukte, en waarom De LogBrew browser-SDK legt elke `fetch()` vast als een span met methode, pad en status, in dezelfde trace als de fout die hij veroorzaakte. Begin met het ruime gratis abonnement, zonder creditcard. [Gratis beginnen](https://logbrew.co/nl) ## Bronnen - [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) ## Meer JavaScript-fouten oplossen - [De Script error oplossen die zijn melding, bestand en regel verbergt](https://logbrew.co/nl/errors/script-error) - [JavaScript-fouten die we reproduceerden, en hoe je elke oplost](https://logbrew.co/nl/errors)