CORS (Cross-Origin Resource Sharing) für Websites einrichten

Was ist CORS?

Cross-Origin Resource Sharing (CORS) ist ein mechanismus, der auf HTTP-Headern basiert und dazu dient, die Einschränkungen für Cross-Origin-Anfragen im Browser zu lockern. Einfach ausgedrückt, wenn eine Webseite (zum Beispiel eine, die sich auf example.com befindet) versucht, Ressourcen von einer anderen Domain (zum Beispiel api.example.net) anzufordern, blockiert der Browser standardmäßig diese Anfragen aufgrund der Same-Origin-Policy. CORS ermöglicht es dem Server, spezielle Header zu der Antwort hinzuzufügen, um dem Browser mitzuteilen, von welchen Ursprüngen Anfragen Zugriff auf die Ressourcen haben dürfen, und ermöglicht somit sicher den Cross-Origin-Zugriff.

Warum CORS verwenden?

Wenn Ihre Frontend-Anwendung (zum Beispiel eine auf app.example.com laufende SPA) Daten von einem Backend-API (zum Beispiel, das auf api.example.com läuft) abrufen muss, müssen Sie wahrscheinlich CORS verwenden.

Detaillierte CORS-Parameter

Hier sind einige häufig verwendete CORS-Parameter und deren Funktionen:

1. Access-Control-Allow-Origin:

   • Funktion: Gibt die erlaubten Ursprünge an, die auf die Ressource zugreifen dürfen.
   • Mögliche Werte:
     • *: Erlaubt Anfragen von beliebigen Domains (nicht empfohlen für Produktionsumgebungen, da unsicher).
     • https://example.com: Erlaubt nur Anfragen von https://example.com.
     • https://example.com https://www.example.net: Erlaubt nur Anfragen von https://example.com und https://www.example.net.
   • Wichtiger Hinweis: Wenn die Anfrage den Header Authorization enthält, darf Access-Control-Allow-Origin nicht auf * gesetzt werden, sondern muss auf eine spezifische Domain gesetzt werden, andernfalls wird die Cross-Origin-Anfrage fehlschlagen.

2. Access-Control-Allow-Methods:

   • Funktion: Gibt die erlaubten HTTP-Methoden an (wie GET, POST, PUT, DELETE).
   • Mögliche Werte: Zum Beispiel: GET, POST, PUT, DELETE, OPTIONS
   • Wichtiger Hinweis: Wenn Ihre Anfrage benutzerdefinierte Header enthält oder die HTTP-Methoden PUT oder DELETE verwendet, müssen Sie auch die OPTIONS-Methode hier angeben, andernfalls sendet der Browser zuerst eine OPTIONS-Prüfanfrage. Wenn die Antwort der Prüfanforderung keine erlaubte OPTIONS-Methode angibt, schlägt Ihre Anfrage fehl.

3. Access-Control-Allow-Headers:

   • Funktion: Gibt die benutzerdefinierten HTTP-Header an, die der Client in der Anfrage verwenden darf.
   • Mögliche Werte: Zum Beispiel: Content-Type, Authorization
   • Wichtiger Hinweis: Wenn Ihre Anfrage benutzerdefinierte Header enthält, müssen Sie diese hier angeben, andernfalls wird der Browser Ihre Anfrage blockieren.

4. Access-Control-Allow-Credentials:

   • Funktion: Bestimmt, ob Cookies oder HTTP-Authentifizierungsinformationen in Cross-Origin-Anfragen mitgesendet werden dürfen.
   • Mögliche Werte: true oder false.
   • Wichtiger Hinweis: Wenn dies auf true gesetzt ist, darf der Wert für Access-Control-Allow-Origin nicht das Platzhalterzeichen * sein.

Aktivieren und Konfigurieren von CORS in ServBay

ServBay bietet eine benutzerfreundliche Oberfläche zur Konfiguration der CORS-Einstellungen Ihrer Website. Die genauen Schritte sind wie folgt:

1. Website auswählen: Klicken Sie im linken Navigationsbereich der ServBay-Hauptoberfläche auf die Option „Website“. Wählen Sie die Website aus, für die Sie CORS konfigurieren möchten.
2. CORS-Konfiguration aufrufen: Im Konfigurationsbereich der Website finden Sie den Abschnitt „CORS“. CORS ist standardmäßig in ServBay deaktiviert, Sie müssen es manuell aktivieren, indem Sie den Schieberegler von „Deaktiviert“ auf „Aktiviert“ umschalten.
3. Access-Control-Allow-Origin konfigurieren: Geben Sie im Eingabefeld für Access-Control-Allow-Origin die erlaubten Domains ein, mehrere Domains können durch Leerzeichen getrennt werden. Zum Beispiel: https://servbay.new https://www.servbay.com https://www.servbay.dev https://www.servbay.cn https://appleid.apple.com.
4. Access-Control-Allow-Methods konfigurieren: Geben Sie im Eingabefeld für Access-Control-Allow-Methods die HTTP-Anfragemethoden ein, die Sie erlauben möchten. Zum Beispiel: GET, POST, PUT, DELETE, OPTIONS.
5. Access-Control-Allow-Headers konfigurieren: Geben Sie im Eingabefeld für Access-Control-Allow-Headers die Anforderungsheader ein, die Sie erlauben möchten. Zum Beispiel: Content-Type, Authorization.
6. Allow-Credentials aktivieren (optional): Wenn Sie das Mittragen von Cookies oder Authentifizierungsinformationen in Cross-Origin-Anfragen erlauben möchten, aktivieren Sie den Schieberegler für Allow-Credentials. Bitte beachten Sie, dass, wenn Sie diese Option aktivieren, der Wert für Access-Control-Allow-Origin nicht auf das Platzhalterzeichen * gesetzt werden darf.
7. Einstellungen speichern: Nachdem Sie die Konfiguration abgeschlossen haben, klicken Sie auf die Schaltfläche „Speichern“ in der unteren rechten Ecke, um Ihre Änderungen anzuwenden.

Beispiel

Basierend auf dem Screenshot sind die eingerichteten CORS für die Website „ServBay Testing“ wie folgt:

• Access-Control-Allow-Origin: https://servbay.new https://www.servbay.com https://www.servbay.dev https://www.servbay.cn https://appleid.apple.com
• Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
• Access-Control-Allow-Headers: Content-Type, Authorization
• Allow-Credentials: Aktiviert.

Das bedeutet, dass Anfragen von den oben genannten Domains auf die Ressourcen der Website servbay.new zugreifen können und die Methoden GET, POST, PUT, DELETE, OPTIONS für die Anfragen verwendet werden können, während sie die Header Content-Type und Authorization sowie Cookie-Informationen mitführen können.

Zu beachtende Punkte

• Sicherheit: Vermeiden Sie in Produktionsumgebungen die Verwendung von Platzhalterzeichen * als Wert für Access-Control-Allow-Origin.
• Caching: Browser können CORS-Antworten zwischenspeichern; Daher müssen Sie möglicherweise den Browser-Cache leeren, nachdem Sie CORS-Einstellungen geändert haben.
• Codekonfiguration: In einigen Fällen müssen Sie zusätzlich zur CORS-Konfiguration auf dem Webserver auch in Ihrem Code (Laravel) CORS konfigurieren.
• Komplexe Szenarien: Für komplexere Cross-Origin-Szenarien müssen Sie möglicherweise CORS mit anderen Techniken kombinieren, wie z.B. JSONP oder Proxy-Servern.

Mit diesen Schritten können Sie CORS einfach in ServBay aktivieren und konfigurieren und sicherstellen, dass Ihre Cross-Origin-Anfragen erfolgreich durchgeführt werden können.

Ich hoffe, dieses Dokument hilft Ihnen, die CORS-Funktionalität von ServBay besser zu verstehen und zu nutzen. Bei Fragen zögern Sie bitte nicht, sich zu melden.