snippets · javascript

Die API funktioniert mit curl, im Browser aber nicht – ist es wirklich CORS?

Der Request funktioniert in curl oder Postman, fetch() im Browser scheitert. Das beweist noch nicht, dass die API kaputt ist: Browser setzen zusätzliche Cross-Origin-Regeln durch.

Erst im Browser unterscheiden

DevTools → Network öffnen und prüfen:

  • Gibt es vor dem eigentlichen Request einen OPTIONS-Request?
  • Welchen Status hat dieser Preflight?
  • Welche Access-Control-Allow-*-Header kommen zurück?
  • Ist der Request tatsächlich cross-origin? Schema, Host oder Port können den Origin unterscheiden.

Ein kleiner Test:

fetch('https://api.example.test/resource', {
  method: 'GET',
})
  .then(async response => ({
    status: response.status,
    text: await response.text(),
  }))
  .then(console.log)
  .catch(console.error);

Warum curl kein Gegenbeweis ist

CORS ist eine Browser-Sicherheitsregel. Ein Kommandozeilenclient kann eine HTTP-Antwort lesen, die Browser-JavaScript wegen fehlender CORS-Freigabe nicht zugänglich machen darf.

Nicht blind Access-Control-Allow-Origin: *

Bei Credentials/Cookies gelten zusätzliche Regeln, und eine pauschale Freigabe kann das Sicherheitsmodell verändern. Erst festlegen, welche Origins und Methoden wirklich erlaubt sein sollen.

Andere Fehler nicht mit CORS verwechseln

DNS, TLS, 500er, Redirects oder Mixed Content können ebenfalls im Browser scheitern. Deshalb Network-Request und Console-Fehler gemeinsam lesen – nicht nur die letzte rote Meldung.