Schreibtisch mit Monitoren, Laptop und Code
Dennis | 17.04.2024

CORS: Cross-Origin Resource Sharing in der Webentwicklung

Webentwicklung > CORS: Cross-Origin Resource Sharing in der Webentwicklung

Heute tauchen wir in ein Thema ein, das sowohl erfahrene Entwickler als auch Neulinge oft verwirrt: CORS oder Cross-Origin Resource Sharing. Vielleicht sind Sie beim Surfen oder Entwickeln einer Webanwendung bereits auf einen „CORS-Fehler“ gestoßen. Dieser Artikel zielt darauf ab, CORS zu entmystifizieren, seine Bedeutung im modernen Web zu erklären und warum ein Verständnis davon bahnbrechend sein kann.

Was ist CORS?

Im Kern ist CORS eine Sicherheitsfunktion, die in Webbrowsern implementiert ist. Es ist wie ein Sicherheitsdienst, der sicherstellt, dass Webanwendungen, die unter einer Herkunft (Domain) laufen, die Erlaubnis haben, auf Ressourcen von einem Server unter einer anderen Herkunft zuzugreifen. Diese Richtlinie dient dazu, Benutzer vor potenziell bösartigen Cross-Origin-Anfragen zu schützen.

Warum ist CORS wichtig?

Stellen Sie sich vor, Sie senden einen Brief an einen Freund in einem anderen Land. Es gibt Regeln und Vorschriften für internationale Post, die sicherstellen, dass der Inhalt sicher und der Prozess gesichert ist. CORS funktioniert ähnlich für Webanwendungen – es legt Regeln fest, wie eine Website mit Ressourcen aus verschiedenen Herkünften interagieren sollte, um die Sicherheit zu gewährleisten.

CORS in Aktion – Aus der Sicht eines Entwicklers:

Für Entwickler kann das Auftreten eines CORS-Fehlers ein alltäglicher Teil der Arbeit sein. Es passiert normalerweise, wenn Ihre Webanwendung versucht, eine Anfrage an einen Server zu stellen, der auf einer anderen Domain, einem anderen Protokoll oder Port als Ihre Website gehostet wird. Hier ist ein vereinfachtes Beispiel für einen CORS-Fehler:

1// A JavaScript fetch request to a different origin
2// App domain https://myappdomain.com
3
4fetch("https://api.differentdomain.com/data")
5  .then(response => response.json())
6  .then(data => console.log(data))
7  .catch(error => console.log('CORS error:', error));

In diesem Code, wenn der Server unter 'api.differentdomain.com' nicht konfiguriert ist, Anfragen von Ihrer Herkunft zu akzeptieren, wird der Browser sie blockieren, was zu einem CORS-Fehler führt.

Für Nicht-Technikaffine:

Denken Sie an CORS als eine Form der digitalen Diplomatie. So wie Länder Zoll- und Einwanderungspolitiken haben, nutzen Websites CORS, um zu regeln, wie Daten über verschiedene Domänen hinweg geteilt werden. Dies ist entscheidend für die Aufrechterhaltung der Online-Sicherheit und Privatsphäre.

Lösung von CORS-Fehlern:

Entwickler lösen CORS-Probleme oft, indem sie den Server so konfigurieren, dass er Anfragen aus verschiedenen Herkünften akzeptiert oder indem sie spezifische Header in ihren Anfragen verwenden. Es ist ein bisschen so, als würde man ein Visum für Ihre Webanwendung bekommen, das ihr erlaubt, auf Ressourcen aus einer anderen Domain zuzugreifen.

Fazit:

Über ein Grundverständnis von CORS zu verfügen ist unerlässlich, egal ob Sie komplexe Webanwendungen erstellen oder einfach nur im Internet surfen. Es ist ein Kernaspekt der Web-Sicherheit und stellt sicher, dass unsere Interaktionen mit verschiedenen Websites sicher und geschützt sind. Für Entwickler kann das Beherrschen von CORS zu reibungsloseren Entwicklungserlebnissen und sichereren Anwendungen führen.

Dennis Hundertmark
Dennis (Softwareentwickler)

Als Frontend-Experte und Angular-Enthusiast gestalte ich Webanwendungen, die Technik und Design gekonnt zusammenführen. Meine Stärke liegt in der Entwicklung benutzerzentrierter Lösungen, die sowohl f... mehr anzeigen

Gitlab

Standort Hannover

newcubator GmbH
Bödekerstraße 22
30161 Hannover

Standort Dortmund

newcubator GmbH
Westenhellweg 85-89
44137 Dortmund