--- title: "Den Fehler Failed to fetch beheben und seine 3 Ursachen unterscheiden" description: "TypeError: Failed to fetch heißt, die Anfrage hat keine HTTP-Antwort bekommen. Ein fehlender CORS-Header, ein Server, der nicht läuft, und ein unbekannter Host geben alle dieselbe Meldung." canonical: "https://logbrew.co/de/errors/failed-to-fetch" last_updated: "2026-11-10" --- # Den Fehler Failed to fetch beheben und seine 3 Ursachen unterscheiden `TypeError: Failed to fetch` heißt, die Anfrage hat keine HTTP-Antwort bekommen. Ein fehlender CORS-Header, ein Server, der nicht läuft, und ein unbekannter Host geben alle dieselbe Meldung. Getestet am 10. November 2026 mit Chromium 152, @logbrew/browser 0.1.21 und @logbrew/sdk 0.1.44 Von [Furkan Erday](https://github.com/furkanerday). Furkan Erday hat LogBrew gegründet. Er entwickelt LogBrew jeden Tag mit Claude Code und Codex. Canonical: https://logbrew.co/de/errors/failed-to-fetch ## Was die Ursache eines fehlgeschlagenen `fetch()` nennt | Was schiefging | `error.message` | Konsole | | --- | --- | --- | | Kein Header `Access-Control-Allow-Origin` | `Failed to fetch` | CORS-Policy | | Nichts lauscht auf dem Port | `Failed to fetch` | `ERR_CONNECTION_REFUSED` | | Der Host hat keinen DNS-Eintrag | `Failed to fetch` | `ERR_NAME_NOT_RESOLVED` | | Der Server antwortete mit 500 | Nicht abgelehnt | `500` | 4 Anfragen an eine API auf einem anderen Origin. Eine volle Tasse heißt, der Text nennt die Ursache. ## Herausfinden, welche Ursache du hast ### Die Browser-Konsole öffnen `fetch()` lehnt bei jedem Netzwerkfehler mit demselben `TypeError: Failed to fetch` ab. Die Konsolenzeile daneben nennt die echte Ursache. ### Die API hat ohne CORS-Header geantwortet Die Konsole sagt `blocked by CORS policy`. Der Server hat geantwortet, aber der Origin der Seite darf die Antwort nicht lesen, also wirft der Browser sie weg. Ausgabe ```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. ``` ### Nichts lauscht auf diesem Host und Port Die Konsole sagt `net::ERR_CONNECTION_REFUSED`. Die API läuft nicht, oder der Port in der URL ist falsch. Starte sie, dann prüfe den Port. Ausgabe ```text Failed to load resource: net::ERR_CONNECTION_REFUSED ``` ### Der Hostname wird nicht aufgelöst Die Konsole sagt `net::ERR_NAME_NOT_RESOLVED`. DNS hat keinen Eintrag für den Host. Prüfe den Hostnamen auf einen Tippfehler und die Umgebungsvariable, die in diesem Deployment die API-URL hält. Ausgabe ```text Failed to load resource: net::ERR_NAME_NOT_RESOLVED ``` ## In deinem Code beheben ### Den CORS-Header von der API senden Antworte mit `Access-Control-Allow-Origin`, gesetzt auf den Origin deiner Seite oder auf `*` für eine öffentliche API. In unserem Test ging derselbe Endpunkt allein durch diesen Header von `Failed to fetch` zu `HTTP 200`. ```bash Access-Control-Allow-Origin: https://app.example.com ``` ### Den Status prüfen, denn ein 500 lehnt nicht ab `fetch()` wird bei jeder HTTP-Antwort erfüllt, auch bei 404 und 500. In unserem Test landete ein 500 mit dem Body `{"error":"tap jammed"}` im `then`-Zweig, nicht im `catch`. Prüfe `response.ok`, bevor du den Body liest. ```bash const response = await fetch(url); if (!response.ok) throw new Error(`HTTP ${response.status} for ${url}`); ``` ### Die URL zusammen mit dem Fehler loggen Ein abgelehntes `fetch()` hat keine Antwort, und sein Stacktrace zeigt auf deinen eigenen Code, nicht auf die Ursache. Fange es dort, wo du `fetch()` aufrufst, und behalte Methode und URL beim Fehler, damit dein Fehlertracking zeigt, welche Anfrage fehlgeschlagen ist. ```bash try { return await fetch(url); } catch (error) { console.error("fetch failed", url, error); throw error; } ``` ## Was wir beim Testen gesehen haben Die Seite lief unter `http://127.0.0.1:4873` in Chromium 152 mit `@logbrew/browser` 0.1.21 und dessen Fetch-Instrumentierung. Eine API unter `http://127.0.0.1:4874` beantwortete 3 Pfade, und wir schickten 5 Anfragen ohne `catch`, sodass jede Ablehnung das SDK als unbehandelte Rejection erreichte. `/api/closed` antwortete mit 200 ohne CORS-Header, und die Anfrage wurde mit `TypeError: Failed to fetch` abgelehnt. Eine Anfrage an Port 4875, auf dem nichts lauschte, und eine an `http://keg.invalid/api` wurden mit demselben Fehler abgelehnt. In allen 3 Fällen war `error.message` `Failed to fetch`, `error.name` war `TypeError`, und der Stacktrace zeigte auf unseren eigenen `fetch()`-Aufruf. Die Konsole hielt sie auseinander. Die erste sagte `blocked by CORS policy`, die zweite `net::ERR_CONNECTION_REFUSED`, die dritte `net::ERR_NAME_NOT_RESOLVED`. `/api/broken`, das mit 500 und dem Header antwortete, wurde gar nicht abgelehnt, und `/api/open`, das mit 200 und dem Header antwortete, gab `HTTP 200 {"ok":true}`. ## Warum jede Ursache dieselbe Meldung hat Der Fetch-Standard macht aus jedem Fehlschlag vor einer Antwort 1 Ding, einen Netzwerkfehler, also eine Antwort mit dem Typ `error` und Status 0. Ein CORS-Fehlschlag ist auch einer. Im Modus `cors` gibt eine Ressource, die das CORS-Protokoll nicht versteht, einen Netzwerkfehler. Die Methode `fetch()` lehnt ihr Promise bei einem Netzwerkfehler mit einem `TypeError` ab, und bei nichts anderem. MDN sagt es genauso. Das Promise wird nur abgelehnt, wenn die Anfrage fehlschlägt, zum Beispiel bei einer fehlerhaften URL oder einem Netzwerkfehler, und nicht bei einem HTTP-Status wie 404 oder 504. Die MDN-Seite zu CORS-Fehlern sagt, dass die Details einer fehlgeschlagenen CORS-Anfrage aus Sicherheitsgründen für JavaScript nicht verfügbar sind und dass die Konsole der einzige Ort ist, an dem du sie findest. whatwg/fetch#526 bittet seit 2017 um aussagekräftigere Fehlertypen und ist noch offen. ## Was LogBrew aufzeichnet Jede Ablehnung kam als 1 Issue namens `Unhandled promise rejection: TypeError` an, mit Stackframes in unser Bundle und dem Gruppierungsschlüssel `browser.unhandledrejection:TypeError:/app.js`. Das sagt dir, wo du `fetch()` aufgerufen hast, nicht, was fehlgeschlagen ist. Die Fetch-Instrumentierung fügte im selben Trace einen Span hinzu, `browser.fetch GET /api/closed`, mit Status `error`, der Methode, dem Anfragepfad und `errorType` `TypeError`. Der Span nennt die fehlgeschlagene Anfrage, auch wenn der Fehler es nicht tut. Die 500-Antwort erzeugte kein Issue, nur einen Span mit Status `error` und `statusCode` 500. Die 200-Antwort erzeugte einen Span mit Status `ok`. In LogBrew sind ein 500 und ein Netzwerkfehler also 2 verschiedene Spans, während in deinem Code nur der zweite im `catch` landet. ## Häufige Fragen ### Was bedeutet TypeError Failed to fetch? Der Browser hat für einen `fetch()`-Aufruf keine HTTP-Antwort bekommen. Der Server war nicht erreichbar, der Host wurde nicht aufgelöst, oder CORS hat die Antwort blockiert. Die Meldung ist in allen 3 Fällen gleich. ### Ist Failed to fetch immer ein CORS-Fehler? Nein. In unserem Test gaben ein fehlender CORS-Header, ein Port ohne Server und ein Host ohne DNS-Eintrag alle diese Meldung. Nur die Konsolenzeile daneben nennt die Ursache. ### Warum lehnt fetch bei einem 404 oder 500 nicht ab? Der Fetch-Standard lehnt nur bei einem Netzwerkfehler ab. Eine HTTP-Antwort mit beliebigem Status ist eine Antwort, also wird `fetch()` erfüllt, und du prüfst `response.ok` selbst. ### Wie fange ich Failed to fetch in JavaScript? Lege den Aufruf in `try` und `catch`, oder hänge `.catch()` an das Promise. Der Fehler ist ein `TypeError` ohne Antwort, logge also URL und Methode selbst. ### Heißt Failed to fetch, dass der Server nicht läuft? Manchmal. Ein Server, der nicht läuft, gibt in der Konsole `net::ERR_CONNECTION_REFUSED`. Dasselbe `Failed to fetch` kommt auch von einem fehlenden CORS-Header oder einem Hostnamen ohne DNS-Eintrag. ## Sieh, welche Anfrage fehlgeschlagen ist, und warum Das LogBrew-Browser-SDK zeichnet jedes `fetch()` als Span mit Methode, Pfad und Status auf, im selben Trace wie der Fehler, den es verursacht hat. Starte mit dem großzügigen kostenlosen Plan, ohne Kreditkarte. [Kostenlos starten](https://logbrew.co/de) ## Quellen - [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) ## Weitere JavaScript-Fehler beheben - [Den Script error beheben, der Meldung, Datei und Zeile verbirgt](https://logbrew.co/de/errors/script-error) - [JavaScript-Fehler, die wir reproduziert haben, und wie du jeden behebst](https://logbrew.co/de/errors)