Start → Hilfe

CORS-Fehler beim Aufruf einer KI-API aus dem Browser

Was Sie sehen

• Access to fetch at '...' from origin '...' has been blocked by CORS policy
• No 'Access-Control-Allow-Origin' header is present on the requested resource
• The request works in curl and Postman but not in the browser

Warum das passiert

Man ist versucht, das als Konfigurationsproblem zu lesen – Origin hinzufügen, Feature ausliefern. Aber überlegen Sie, was ein erfolgreicher Browser-Aufruf bedeutet. Der Schlüssel reist in einem Header, den die Entwicklertools des Nutzers vollständig anzeigen. Er steckt im Bundle, wenn Sie ihn eingebettet haben, und im Netzwerk-Tab, wenn nicht. Jeder, der die Seite öffnet, hat ihn.

Auf diese Weise geleakte Schlüssel sind kein theoretisches Risiko. Öffentliche Code-Suchen fördern sie laufend zutage, und ein gestohlener Schlüssel für eine API mit Abrechnung pro Token wird direkt zur Rechnung eines Fremden auf Ihrem Konto. Deshalb setzen die meisten Anbieter einen restriktiven Allow-Origin statt * – kein Versehen, sondern eine bewusste Ablehnung.

Das Proxy-Muster sind drei oder vier Zeilen Servercode: Ihre Seite ruft Ihr Backend auf, Ihr Backend hält den Schlüssel und ruft den Anbieter auf. Damit haben Sie auch den Ort für Rate Limits und Ausgabenobergrenzen pro Nutzer, die Sie ohnehin wollen.

Prüfen, ob es daran liegt

Fragen Sie den Endpunkt, welche Origins er tatsächlich erlaubt:

curl -s -I -X OPTIONS 'YOUR_BASE_URL/chat/completions' \
  -H 'Origin: https://example.com' \
  -H 'Access-Control-Request-Method: POST' \
  | grep -i 'access-control'

Kommt Access-Control-Allow-Origin mit einer bestimmten Domain statt * zurück, werden Browser-Aufrufe von Ihrem Origin nicht funktionieren – und keine Änderung im Client ändert daran etwas.

So beheben Sie es

1. Einen Endpunkt im eigenen Backend anlegenIhre Seite sendet an /api/chat auf Ihrer eigenen Domain; dieser Handler fügt den Authorization-Header hinzu und leitet die Anfrage weiter. Kein CORS beteiligt, weil der Browser nur mit Ihrem eigenen Origin spricht.
2. Nie ein öffentliches Build-Präfix für einen Schlüssel verwendenNEXT_PUBLIC_-, VITE_- und REACT_APP_-Variablen werden in das ausgelieferte JavaScript kompiliert. Ein Schlüssel dort ist veröffentlicht, nicht konfiguriert.
3. Alles rotieren, was schon ausgeliefert wurdeWar ein Schlüssel in einem ausgelieferten Bundle, behandeln Sie ihn als öffentlich und ersetzen Sie ihn. Rotieren ist billig; eine unbegrenzte Rechnung nicht.
4. Limits pro Nutzer im Proxy setzenLäuft der Verkehr erst über Ihren eigenen Handler, können Sie Ausgaben pro Sitzung deckeln. Ruft der Browser den Anbieter direkt auf, gibt es keinen Ort, das durchzusetzen.

Verwandte Themen

Zuletzt geprüft am 2026-10-01. Geschrieben aus Problemen, die auf einem laufenden OpenAI-kompatiblen Gateway diagnostiziert wurden – nicht von anderen Seiten zusammengetragen.