CORS Tester Online: Cross-Origin Resource Sharing-Probleme diagnostizieren

31. März 2026 · 12 Min. Lesezeit

CORS verstehen und seine Bedeutung

Cross-Origin Resource Sharing (CORS) ist ein Sicherheitsmechanismus, der in Webbrowsern implementiert ist und steuert, wie Webanwendungen Ressourcen von verschiedenen Ursprüngen anfordern können. Man kann es sich wie einen Türsteher in einem Club vorstellen – er entscheidet anhand bestimmter Regeln, wer reinkommt und wer nicht.

Standardmäßig setzen Browser die Same-Origin Policy (SOP) durch, die verhindert, dass JavaScript, das auf einer Domain läuft, auf Ressourcen einer anderen Domain zugreift. Dies ist eine grundlegende Sicherheitsfunktion, die Benutzer vor bösartigen Skripten schützt. Moderne Webanwendungen müssen jedoch oft mit APIs und Diensten kommunizieren, die auf verschiedenen Domains gehostet werden, und hier kommt CORS ins Spiel.

CORS bietet eine standardisierte Möglichkeit für Server, Browsern mitzuteilen: „Ja, es ist in Ordnung, dass diese bestimmte Website auf meine Ressourcen zugreift." Ohne ordnungsgemäße CORS-Konfiguration werden legitime Cross-Origin-Anfragen blockiert, was die Funktionalität Ihrer Webanwendungen beeinträchtigt.

Betrachten Sie ein reales Szenario: Sie erstellen eine E-Commerce-Plattform, bei der das Frontend auf https://myshop.com gehostet wird, aber Ihre Produktinventar-API auf https://api.inventory-service.com liegt. Ohne CORS-Header kann Ihr Frontend-JavaScript keine Produktdaten abrufen, sodass Ihre Kunden auf leere Regale starren.

CORS wird noch wichtiger, wenn Sie arbeiten mit:

• Drittanbieter-APIs, auf die Ihr Frontend direkt zugreifen muss
• Microservices-Architekturen, bei denen verschiedene Dienste auf verschiedenen Domains laufen
• Content Delivery Networks (CDNs), die Assets von verschiedenen Ursprüngen bereitstellen
• Single Page Applications (SPAs), die mit Backend-APIs kommunizieren
• Webfonts, Bilder oder andere Ressourcen, die von externen Domains geladen werden

Wie CORS funktioniert: Der technische Tiefgang

Das Verständnis, wie CORS unter der Haube funktioniert, hilft Ihnen, Probleme effektiver zu diagnostizieren. Der CORS-Mechanismus umfasst zwei Arten von Anfragen: einfache Anfragen und Preflight-Anfragen.

Einfache Anfragen

Eine einfache Anfrage ist eine, die alle diese Bedingungen erfüllt:

• Verwendet eine dieser HTTP-Methoden: GET, HEAD oder POST
• Enthält nur CORS-sichere Header wie Accept, Accept-Language, Content-Language oder Content-Type
• Wenn Content-Type verwendet wird, muss es application/x-www-form-urlencoded, multipart/form-data oder text/plain sein

Bei einfachen Anfragen sendet der Browser die Anfrage direkt mit einem Origin-Header. Der Server antwortet mit einem Access-Control-Allow-Origin-Header, der angibt, ob der Ursprung erlaubt ist. Wenn der Header mit dem anfragenden Ursprung übereinstimmt (oder auf * gesetzt ist), erlaubt der Browser, dass die Antwort vom JavaScript-Code gelesen wird.

Preflight-Anfragen

Jede Anfrage, die die Kriterien für einfache Anfragen nicht erfüllt, löst eine Preflight-Anfrage aus. Dies ist eine OPTIONS-Anfrage, die vom Browser vor der eigentlichen Anfrage gesendet wird, um zu prüfen, ob das CORS-Protokoll verstanden wird und die eigentliche Anfrage sicher gesendet werden kann.

Die Preflight-Anfrage enthält Header wie:

• Access-Control-Request-Method: Die HTTP-Methode der eigentlichen Anfrage
• Access-Control-Request-Headers: Benutzerdefinierte Header, die mit der eigentlichen Anfrage gesendet werden
• Origin: Der Ursprung, der die Anfrage stellt

Der Server muss auf den Preflight mit entsprechenden CORS-Headern antworten, die angeben, was erlaubt ist. Nur wenn der Preflight erfolgreich ist, sendet der Browser die eigentliche Anfrage.

Häufige CORS-Probleme und Fehlermeldungen

CORS-Fehler gehören zu den frustrierendsten Problemen, auf die Entwickler stoßen. Lassen Sie uns die häufigsten Probleme aufschlüsseln und was sie tatsächlich bedeuten.

Fehlender Access-Control-Allow-Origin-Header

Dies ist der häufigste CORS-Fehler, den Sie sehen werden. Die Browser-Konsole zeigt etwas wie:

Der Zugriff auf fetch bei 'https://api.example.com/data' vom Ursprung 'https://myapp.com' wurde durch die CORS-Richtlinie blockiert: Kein 'Access-Control-Allow-Origin'-Header ist in der angeforderten Ressource vorhanden.

Dies bedeutet, dass der Server den erforderlichen CORS-Header nicht in seiner Antwort enthalten hat. Die Lösung ist einfach: Konfigurieren Sie Ihren Server so, dass er den Access-Control-Allow-Origin-Header entweder mit dem spezifischen Ursprung oder * für öffentliche APIs sendet.

Falsche HTTP-Methode

Wenn Sie versuchen, eine HTTP-Methode zu verwenden, die der Server nicht explizit erlaubt hat, sehen Sie einen Fehler wie:

Der Zugriff auf fetch bei 'https://api.example.com/data' vom Ursprung 'https://myapp.com' wurde durch die CORS-Richtlinie blockiert: Methode PUT ist nicht durch Access-Control-Allow-Methods in der Preflight-Antwort erlaubt.

Dies geschieht während der Preflight-Phase. Ihr Server muss die HTTP-Methode im Access-Control-Allow-Methods-Header einschließen.

Anmeldeinformationen nicht unterstützt

Wenn Sie versuchen, Cookies oder Authentifizierungs-Header zu senden, aber der Server nicht dafür konfiguriert ist, werden Sie auf Folgendes stoßen:

Der Zugriff auf fetch bei 'https://api.example.com/data' vom Ursprung 'https://myapp.com' wurde durch die CORS-Richtlinie blockiert: Der Wert des 'Access-Control-Allow-Credentials'-Headers in der Antwort ist '', der 'true' sein muss, wenn der Anmeldeinformationsmodus der Anfrage 'include' ist.

Um dies zu beheben, muss der Server Access-Control-Allow-Credentials: true senden, und wichtig: er kann nicht Access-Control-Allow-Origin: * verwenden, wenn Anmeldeinformationen beteiligt sind – er muss den genauen Ursprung angeben.

Benutzerdefinierte Header nicht erlaubt

Moderne Anwendungen verwenden oft benutzerdefinierte Header für API-Schlüssel, Authentifizierungs-Token oder andere Metadaten. Wenn diese nicht explizit erlaubt sind, sehen Sie:

Anfrage-Header-Feld x-api-key ist nicht durch Access-Control-Allow-Headers in der Preflight-Antwort erlaubt.

Die Lösung besteht darin, Ihre benutzerdefinierten Header im Access-Control-Allow-Headers-Antwort-Header einzuschließen.

Einen CORS-Tester effektiv nutzen

Ein CORS-Tester ist ein unschätzbares Werkzeug zur Diagnose von Cross-Origin-Problemen, ohne Code zu schreiben. Er simuliert Browser-Anfragen und zeigt Ihnen genau, welche CORS-Header gesendet und empfangen werden. Sie können unseren CORS-Tester verwenden, um Probleme schnell zu diagnostizieren.

Was ein guter CORS-Tester leisten sollte

Ein effektives CORS-Test-Tool sollte Folgendes bieten:

• Die Möglichkeit, die Ziel-URL und den Ursprung anzugeben
• Optionen zur Auswahl verschiedener HTTP-Methoden (GET, POST, PUT, DELETE usw.)
• Benutzerdefinierte Header-Konfiguration zum Testen spezifischer Szenarien
• Klare Anzeige sowohl der Anfrage- als auch der Antwort-Header
• Anzeige, ob die CORS-Prüfung bestanden oder fehlgeschlagen ist
• Detaillierte Fehlermeldungen, die erklären, was schief gelaufen ist

Schritt-für-Schritt-Testprozess

So verwenden Sie einen CORS-Tester effektiv:

1. Geben Sie die API-Endpunkt-URL ein, die Sie testen möchten
2. Geben Sie den Ursprung an, der die Anfrage stellen wird (Ihre Frontend-Domain)
3. Wählen Sie die HTTP-Methode, die Ihre Anwendung verwenden wird
4. Fügen Sie benutzerdefinierte Header hinzu, die Ihre Anwendung sendet (wie Authorization oder X-API-Key)
5. Führen Sie den Test aus und untersuchen Sie die Ergebnisse
6. Überprüfen Sie die Antwort-Header, um zu sehen, welche CORS-Richtlinien vorhanden sind
7. Identifizieren Sie fehlende oder falsche Header, die auf dem Server konfiguriert werden müssen

Testergebnisse interpretieren

Wenn Sie einen CORS-Test durchführen, achten Sie auf diese wichtigen Indikatoren:

• Preflight-Status: War die OPTIONS-Anfrage erfolgreich? Wenn nicht, verarbeitet Ihr Server möglicherweise Preflight-Anfragen nicht korrekt.
• Access-Control-Allow-Origin-Wert: Stimmt er mit Ihrem Ursprung überein oder ist er auf * gesetzt? Wenn er nicht übereinstimmt, wird die Anfrage fehlschlagen.
• Erlaubte Methoden: Ist Ihre beabsichtigte HTTP-Methode in Access-Control-Allow-Methods aufgeführt?
• Erlaubte Header: Sind alle Ihre benutzerdefinierten Header in Access-Control-Allow-Headers enthalten?
• Unterstützung für Anmeldeinformationen: Wenn Sie Cookies senden müssen, ist Access-Control-Allow-Credentials auf true gesetzt?

Sie können auch unseren HTTP-Headers-Analyzer verwenden, um eine detaillierte Aufschlüsselung aller gesendeten und empfangenen Header zu erhalten, was CORS-Tests perfekt ergänzt.

Praktische Beispiele zur Diagnose von CORS-Problemen

Beispiel 1: Social-Media-Integration

Angenommen, Sie erstellen ein Social-Media-Dashboard, das Beiträge von mehreren Plattformen aggregiert. Ihr Frontend auf https://dashboard.example.com muss Daten von https://api.socialmedia.com abrufen.

Sie stellen eine POST-Anfrage, um einen neuen Beitrag zu erstellen, aber Sie erhalten ständig CORS-Fehler. So diagnostizieren Sie es:

1. Öffnen Sie Ihren CORS-Tester und geben Sie https://api.socialmedia.com/posts ein
2. Setzen Sie den Ursprung auf https://dashboard.example.com
3. Wählen Sie POST als Methode
4. Fügen Sie den Content-Type-Header hinzu: application/json
5. Fügen Sie Ihren Authorization-Header hinzu: Bearer your-token-here
6. Führen Sie den Test aus

Der Test zeigt, dass der Server nur GET-Anfragen erlaubt. Der Access-Control-Allow-Methods-Header zeigt: GET, HEAD, OPTIONS. Sie müssen den API-Anbieter kontaktieren, um POST-Anfragen zu aktivieren, oder prüfen, ob es einen anderen Endpunkt zum Erstellen von Beiträgen gibt.

Beispiel 2: E-Commerce-Inventarsystem

Ihre E-Commerce-Website auf https://shop.example.com ruft Inventardaten von https://inventory.example.com ab. Die API erfordert einen benutzerdefinierten Header X-Shop-ID, um zu identifizieren, welches Geschäft die Anfrage stellt.

Das Testen zeigt den Fehler: „Anfrage-Header-Feld x-shop-id ist nicht durch