Was ist ein CORS-Header-Prüfer?
Cross-Origin Resource Sharing (CORS) ist ein Browser-Sicherheitsmechanismus, der steuert, wie Webseiten auf einer Domain Ressourcen von einer anderen Domain anfordern können. Wenn eine Frontend-Anwendung bei HTTPs://myapp.com versucht, Daten aus HTTPs://API.example.com, abzurufen, überprüft der Browser die CORS-Header des Servers, um festzustellen, ob die Anforderung zulässig ist. Ein CORS-Header-Prüfer analysiert die Antwort-Header von einem API-Server und bewertet, ob sie korrekt Cross-Origin-Anfragen von Ihrem angegebenen Ursprung, der HTTP-Methode und benutzerdefinierten Headern zulassen. Es identifiziert häufige Konfigurationsfehler wie fehlende Access-Control-Allow-Origin-Header, Wildcard-Ursprünge in Kombination mit Anmeldeinformationen und unzulässige Methoden oder Header.
So verwenden Sie den CORS-Header-Prüfer
- 1Geben Sie Ihre Frontend-Anwendung 's origin (e.g., 'HTTPs://myapp.com') im Feld Request Origin ein.
- 2Wählen Sie die HTTP-Methode aus, die Ihre Anwendung zur Erstellung der Cross-Origin-Anfrage verwendet.
- 3Fügen Sie die Antwort-Header von Ihrem API-Server in den Response Headers-Textbereich ein. Geben Sie einen Header pro Zeile im 'Key: Value'-Format ein.
- 4Überprüfen Sie die Analyseergebnisse unten. Grüne Häkchen zeigen Passkontrollen an, gelbe Warnungen deuten auf mögliche Probleme hin und rote Kreuze zeigen Blockierungsprobleme an.
Häufige Anwendungsfälle
Debugging CORS Fehler
Wenn Ihre Browserkonsole 'Access to fetch has been blocked by CORS policy' anzeigt, fügen Sie die Antwort-Header hier ein, um schnell zu erkennen, was fehlt oder falsch konfiguriert ist.
Validierung der Serverkonfiguration
Bevor Sie API-Änderungen bereitstellen, vergewissern Sie sich, dass Ihre CORS-Header die erwarteten Ursprünge, Methoden und benutzerdefinierten Header korrekt zulassen, ohne übermäßig freizügig zu sein.
Sicherheitsüberprüfung
Prüfen Sie die CORS-Konfiguration Ihrer API, um sicherzustellen, dass sie den bewährten Sicherheitspraktiken entspricht - keine Platzhalter-Ursprünge mit Anmeldeinformationen, geeignetes Preflight-Caching und minimal zulässige Header.
Lehren & Lernen CORS
Verstehen Sie, wie verschiedene CORS-Header-Kombinationen das Browserverhalten beeinflussen, indem Sie mit verschiedenen Konfigurationen experimentieren und die Analyseergebnisse in Echtzeit sehen.
Häufig gestellte Fragen
Was ist eine CORS Preflight Request?
Eine Preflight-Anfrage ist eine automatische OPTIONS-Anfrage, die vom Browser vor der eigentlichen Anfrage gesendet wird, wenn nicht einfache Methoden (PUT, PATCH, DELETE), benutzerdefinierte Header oder bestimmte Inhaltstypen verwendet werden. Der Server muss mit entsprechenden Access-Control-Allow-*-Headern antworten. Der Access-Control-Max-Age-Header steuert, wie lange der Browser Preflight-Ergebnisse zwischenspeichert.
Warum kann ich Access-Control-Allow-Origin: * mit Anmeldeinformationen nicht verwenden?
Wenn eine Anfrage Anmeldeinformationen (Cookies oder HTTP-Authentifizierung) enthält, muss der Server mit dem genauen Ursprung in Access-Control-Allow-Origin antworten, nicht mit der Platzhalter *. Dies verhindert, dass eine Website authentifizierte Anfragen an Ihre API stellt. Sie müssen den spezifischen anfordernden Ursprung wiedergeben.
Was sind 'simple requests', die keinen Preflight erfordern?
Einfache Anfragen verwenden GET-, HEAD- oder POST-Methoden mit nur Standard-Headern (Accept, Accept-Language, Content-Language, Content-Type mit Werten application/x-www-form-urlencoded, multipart/form-data oder text/plain). Jede andere Kombination löst eine Preflight OPTIONS Anforderung aus.
Sendet dieses Tool tatsächliche Anforderungen zum Testen von CORS?
Nein, dieses Tool führt eine reine Offline-Analyse durch. Sie fügen die Antwort-Header ein und bewerten sie mit Ihrem angegebenen Ursprung und Ihrer Methode. Um die tatsächlichen Antwort-Header zu erhalten, können Sie den Browser DevTools Network Tab, curl mit -I-Flag oder einen beliebigen HTTP-Client verwenden.