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

In der modernen Webentwicklung benötigen Frontend-Anwendungen (die meist unter einer Domain laufen) häufig Zugriff auf Backend-APIs oder andere Dienste (die unter anderen Domains oder Ports laufen können). Aus Sicherheitsgründen blockiert die sogenannte Same-Origin-Policy des Browsers standardmäßig solche Cross-Origin-Anfragen. CORS ist ein standardisierter Mechanismus, mit dem Server deklarieren, welche Ursprünge auf ihre Ressourcen zugreifen dürfen, und so den sicheren Austausch über Domain-Grenzen hinweg ermöglichen.

In diesem Artikel erfahren Sie, wie Sie in Ihrer lokalen ServBay-Webentwicklungsumgebung CORS ganz einfach über die Benutzeroberfläche von ServBay für Ihre Website aktivieren und konfigurieren.

Was ist CORS?

Cross-Origin Resource Sharing (CORS) ist ein Mechanismus basierend auf HTTP-Headern, mit dessen Hilfe ein Server mitteilen kann, für welche Ursprünge (Domain, Protokoll oder Port) er das Laden von Ressourcen erlaubt – auch über die eigene Domain hinaus. Versucht eine Webseite, Ressourcen von einem anderen Ursprung zu laden, handelt es sich aus Sicht des Browsers um eine Cross-Origin-Anfrage. Gemäß der Same-Origin-Policy werden solche Anfragen standardmäßig blockiert. CORS bietet eine Möglichkeit für die Kommunikation zwischen Server und Browser, um zu entscheiden, ob eine bestimmte Cross-Origin-Anfrage zulässig ist.

Warum sollten Entwickler CORS konfigurieren?

Wenn Sie eine von Frontend und Backend getrennte Anwendung entwickeln (z. B. das Frontend läuft auf app.servbay.demo und das Backend-API auf api.servbay.demo) oder Ihre Frontend-App auf fremde APIs zugreifen muss, verhindern Browser aufgrund der Same-Origin-Policy die entsprechenden Anfragen. Durch eine gezielte CORS-Konfiguration teilen Sie dem Browser mit, dass Ihr Server Zugriffe von bestimmten Ursprüngen akzeptiert – und lösen so CORS-bedingte Fehler.

Wichtige HTTP-Header für CORS – Überblick

Bei der Serverantwort auf eine Cross-Origin-Anfrage werden spezielle Access-Control-* HTTP-Header gesetzt. Der Browser sieht diese Header und entscheidet anhand ihrer Werte, ob eine Cross-Origin-Anfrage erlaubt ist. In ServBay können Sie insbesondere folgende zentrale CORS-Parameter (die entsprechenden HTTP-Response-Header) konfigurieren:

1. Access-Control-Allow-Origin

   • Bedeutung: Das wichtigste CORS-Header-Feld: Hier legen Sie fest, welche Ursprünge (Domains) auf die Ressource zugreifen dürfen.
   • Mögliche Werte:
     • *: Erlaubt Anfragen von allen Ursprüngen. Achtung: Dieser Wert ist zwar praktisch, sollte in Produktionsumgebungen aber nicht verwendet werden, weil dadurch jede Website auf Ihre Ressourcen zugreifen könnte – ein erhebliches Sicherheitsrisiko!
     • https://servbay.demo: Erlaubt Anfragen nur von diesem Ursprung.
     • https://servbay.demo https://api.servbay.demo: Erlaubt Anfragen von mehreren spezifischen Ursprüngen (mit Leerzeichen getrennt).
   • Wichtig: Müssen Cross-Origin-Anfragen beispielsweise Cookies oder Authentifizierungsinformationen enthalten (d. h. Access-Control-Allow-Credentials: true ist gesetzt), dann darf Access-Control-Allow-Origin nicht auf * stehen, sondern Sie müssen konkrete Ursprünge angeben.

2. Access-Control-Allow-Methods

   • Bedeutung: Gibt die erlaubten HTTP-Methoden für Cross-Origin-Anfragen an (GET, POST, PUT, DELETE, OPTIONS etc.).
   • Mögliche Werte: Z. B. GET, POST, PUT, DELETE, OPTIONS (durch Kommas getrennte Liste).
   • Hinweis: Für sogenannte "nicht einfache" Anfragen (z. B. mit PUT, DELETE oder benutzerdefinierten Headern) führt der Browser einen sogenannten Preflight-Request mit der Methode OPTIONS durch. Ihr Server muss diese Preflight-Anfrage beantworten und dabei insbesondere den Header Access-Control-Allow-Methods korrekt setzen. Daher sollte OPTIONS üblicherweise mitkonfiguriert sein.

3. Access-Control-Allow-Headers

   • Bedeutung: Gibt an, welche benutzerdefinierten HTTP-Header Sie für Cross-Origin-Anfragen erlauben möchten.
   • Mögliche Werte: Z. B. Content-Type, Authorization, X-Requested-With (durch Kommas getrennt).
   • Hinweis: Falls Ihre Anfrage weitere Header nutzt als die "einfachen" Standard-Header wie Accept, Accept-Language, Content-Language, Content-Type (wenn dessen Wert application/x-www-form-urlencoded, multipart/form-data oder text/plain ist), dann führt der Browser ebenfalls einen Preflight-Request durch und die extra Header müssen hier explizit aufgeführt werden.

4. Access-Control-Allow-Credentials

   • Bedeutung: Gibt an, ob Cross-Origin-Anfragen die Übermittlung von Nutzer-Zugangsdaten wie Cookie, Client-SSL-Zertifikaten oder HTTP-Authentifizierung erlauben.
   • Mögliche Werte: true oder false.
   • Wichtig: Wenn Sie diesen Wert auf true setzen, darf wie oben erwähnt der Wert von Access-Control-Allow-Origin nicht * betragen. Zusätzlich muss der Client im Browser (JavaScript) z. B. xhr.withCredentials = true oder fetch(url, { credentials: 'include' }) setzen.

CORS in ServBay aktivieren und konfigurieren

ServBay stellt eine übersichtliche grafische Oberfläche bereit, mit der Sie die CORS-Einstellungen für jede Website individuell setzen können. Vorgehensweise:

1. ServBay öffnen und zur Webseitenliste wechseln: Starten Sie die ServBay-App. Im linken Seitenmenü finden Sie den Punkt "Websites". Hier sehen Sie eine Übersicht aller in ServBay konfigurierten lokalen Websites.

2. Die gewünschte Website zur CORS-Konfiguration auswählen: Suchen Sie in der Liste die Website heraus, für die Sie CORS aktivieren wollen, und klicken Sie auf deren Namen, um zu den Detaileinstellungen zu gelangen.

3. CORS-Einstellungen finden und aktivieren: Scrollen Sie mittig im Konfigurationsbereich nach unten zur Sektion "CORS". Standardmäßig ist CORS deaktiviert. Mit dem Schieberegler neben dem Bereich schalten Sie die Funktion von „aus“ auf „ein“. Danach sind die CORS-Einstellungen editierbar.

4. Access-Control-Allow-Origin konfigurieren: Geben Sie im Feld "Access-Control-Allow-Origin" den/die Ursprung(e) an, denen Sie Zugriff auf Ihre Ressourcen erlauben wollen. Für mehrere Ursprünge trennen Sie die Werte mit Leerzeichen (z. B. https://frontend.servbay.demo https://anotherapp.servbay.demo). Vermeiden Sie bitte die Nutzung von * in Produktionsumgebungen.

5. Access-Control-Allow-Methods konfigurieren: Im Feld "Access-Control-Allow-Methods" geben Sie die erlaubten HTTP-Methoden kommagetrennt ein (z. B. GET, POST, PUT, DELETE, OPTIONS). Stellen Sie sicher, dass alle von Ihrer Anwendung benötigten Methoden aufgeführt sind – insbesondere auch OPTIONS, um Preflight-Requests zu ermöglichen.

6. Access-Control-Allow-Headers konfigurieren: Im Feld "Access-Control-Allow-Headers" listen Sie die erlaubten benutzerdefinierten HTTP-Header durch Kommas getrennt auf (z. B. Content-Type, Authorization, X-Custom-Header). Geben Sie nur jene Header an, die Ihre Anwendung tatsächlich für Cross-Origin-Anfragen benötigt.

7. Access-Control-Allow-Credentials konfigurieren (optional): Müssen Cross-Origin-Anfragen auch Cookie oder HTTP-Authentifizierung übertragen, aktivieren Sie den Schieberegler neben "Allow-Credentials". Wichtiger Hinweis: In diesem Fall darf in Schritt 4 der Wert von Access-Control-Allow-Origin nicht * sein.

8. Einstellungen speichern: Nachdem Sie alle gewünschten CORS-Optionen gesetzt haben, klicken Sie unten rechts auf "Speichern", um Ihre Änderungen zu übernehmen. ServBay aktualisiert dann die Webserver-Konfiguration automatisch (für Caddy oder Nginx), ein manuelles Neustarten ist nicht nötig.

Beispielkonfiguration

Das folgende Bild zeigt, wie die CORS-Konfiguration für die Beispiel-Website „ServBay Demo Website“ in ServBay aussehen kann:

Basierend auf der obigen Konfiguration gilt:

• Access-Control-Allow-Origin: https://frontend.servbay.demo https://api.servbay.demo
• Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
• Access-Control-Allow-Headers: Content-Type, Authorization
• Allow-Credentials: aktiviert (true)

Das bedeutet, nur Anfragen von den Ursprüngen https://frontend.servbay.demo und https://api.servbay.demo dürfen auf Ressourcen der „ServBay Demo Website“ zugreifen. Unterstützt werden die Methoden GET, POST, PUT, DELETE und OPTIONS, die Header Content-Type und Authorization dürfen mitgesendet werden und Cookies/Authentifizierungsinformationen sind erlaubt.

Hinweise und Best Practices

• Sicherheit geht vor: In Ihrer Entwicklungs- und Testumgebung kann ein Access-Control-Allow-Origin: * praktisch sein. Für Produktivumgebungen sollten Sie den Zugriff aber immer auf die tatsächlich notwendigen Ursprünge beschränken, um Risiken zu minimieren.
• Preflight-Anfragen: Ein Verständnis des Preflight-Vorgangs (OPTIONS-Methode) ist für das Debugging von CORS-Problemen essenziell. Stellen Sie sicher, dass Ihr Server (über die ServBay-Konfiguration) die nötigen Header für die Preflight-Anfrage zurückgibt.
• Browser-Cache: Browser cachen häufig CORS-Policies. Wenn nach eine Änderung der CORS-Einstellungen in ServBay Probleme bestehen bleiben, leeren Sie bitte den Cache oder testen Sie im Inkognito-Modus.
• CORS auf Anwendungsebene: Manche Webframeworks/-bibliotheken (wie Laravel, Express.js, Spring Boot usw.) bieten ebenfalls eigene CORS-Einstellungen auf Anwendungsebene. Die ServBay-Konfiguration wirkt auf Webserver-Ebene (Caddy/Nginx) und überschreibt normalerweise die Anwendungsebene. In komplexeren Szenarien sollten Sie beide Ebenen koordinieren.
• Entwicklungstools: Nutzen Sie die Entwicklertools des Browsers (meist mit F12), insbesondere den Netzwerk-Tab, um Anfragen, Antworten und die relevanten HTTP-Header zu prüfen. Das hilft Ihnen, CORS-Konfigurationsprobleme und Fehlerursachen schnell zu erkennen.

FAQ – Häufig gestellte Fragen

F: Ich habe CORS nach Anleitung konfiguriert, aber Cross-Origin-Anfragen schlagen fehl – was tun?

A: Gehen Sie wie folgt vor:

1. Prüfen Sie die Browser-Konsole und den Netzwerk-Tab: Moderne Browser geben dort CORS-Fehlermeldungen aus. Prüfen Sie, ob in den Response-Headern Werte für Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers enthalten sind und sie mit Ihrem Request übereinstimmen.
2. Quelle überprüfen: Achten Sie darauf, dass der Ursprung (Protokoll, Domain, Port) exakt mit dem Wert in Access-Control-Allow-Origin übereinstimmt.
3. Methoden und Header prüfen: Kontrollieren Sie, ob in Access-Control-Allow-Methods alle genutzten HTTP-Methoden stehen und in Access-Control-Allow-Headers alle verwendeten Custom-Header.
4. Thema Zugangsdaten: Wenn Sie Cookies oder andere Credentials übertragen müssen, stellen Sie sicher, dass Allow-Credentials aktiviert und Access-Control-Allow-Origin nicht * ist. Auch Ihr Client-Code muss Credentials explizit anfordern (withCredentials = true).
5. Preflight-Anfrage: Prüfen Sie bei Nicht-Standard-Anfragen, ob der Browser einen OPTIONS-Preflight schickt und ob der Server darauf die passenden Header setzt.
6. ServBay-Konfiguration speichern: Nach jeder Anpassung in ServBay nicht vergessen, explizit auf „Speichern“ zu klicken.

F: Kann ich eine globale CORS-Strategie für alle Websites setzen?

A: Die CORS-Einstellungen in ServBay gelten pro Website, so lässt sich für jede Instanz ein maßgeschneidertes Setup einrichten. Eine globale Konfiguration für alle Websites bietet die ServBay-Oberfläche derzeit nicht. Wenn Sie eine ähnliche Policy für mehrere Seiten verwenden wollen, müssen Sie dies jeweils gesondert einrichten.

F: Wie setzt ServBay CORS technisch um?

A: ServBay verwendet als zugrunde liegenden Webserver Caddy oder Nginx. Ihre Einstellungen in der ServBay-Oberfläche werden von ServBay automatisch in die entsprechenden Caddyfile- bzw. Nginx-Konfigurationsanweisungen übersetzt und verwaltet. Sie müssen keine Konfigurationsdateien manuell bearbeiten oder Server neustarten.

Fazit

Mit der intuitiven ServBay-Oberfläche können Sie CORS für Websites Ihrer lokalen Entwicklungsumgebung schnell und komfortabel aktivieren und konfigurieren – und so alle Aufgaben rund um Cross-Origin-Anfragen sicher und effizient lösen. Das tiefe Verständnis von CORS-Headern wie Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers und Access-Control-Allow-Credentials garantiert, dass Ihre CORS-Konfiguration korrekt, sicher und zuverlässig arbeitet. Indem Sie die Hinweise und Best Practices aus diesem Leitfaden beherzigen, entwickeln Sie effizienter und sicherer im lokalen Webumfeld.