HTML - Web CORS: Ein Anfängerleitfaden
Hallo da draußen, angehende Web-Entwickler! Heute machen wir uns auf eine aufregende Reise in die Welt der CORS. Keine Sorge, wenn Sie vorher noch nie etwas davon gehört haben – bis zum Ende dieses Tutorials werden Sie ein CORS-Experte sein! Also holen Sie sich Ihr lieblingsgetränk, machen Sie es sich gemütlich und tauchen wir ein!
Was ist CORS?
CORS steht für Cross-Origin Resource Sharing. Ich weiß, das klingt wie ein kompliziertes Wort, aber ich werde es Ihnen mit einer spaßigen Analogie erklären.
Stellen Sie sich vor, Sie sind in einem schicken Restaurant (das ist Ihr Webbrowser) und möchten Essen von einem anderen Restaurant auf der anderen Straßenseite (das ist eine andere Website) bestellen. Normalerweise gestattet das schicke Restaurant das nicht, weil sie möchten, dass Sie nur ihr Essen essen. Aber mit CORS ist es so, als würde das schicke Restaurant sagen: "Klar, bestelle ruhig von der anderen Straßenseite!" CORS ist eine Möglichkeit für Webbrowser, es sicher zu gestatten, dass Websites Ressourcen von anderen Websites anfordern.
Warum brauchen wir CORS?
In den Anfangszeiten des Internets hatten Browser eine strenge Sicherheitsrichtlinie namens Same-Origin-Policy. Diese Richtlinie verhinderte, dass Websites Anfragen an andere Domains stellen, was großartig für die Sicherheit war, aber nicht so gut für die Funktionalität.
Als das Web weiter evolved, brauchten Entwickler eine Möglichkeit, sicher cross-origin-Anfragen zu stellen. Da kam CORS ins Spiel, das eine sichere Methode bot, die Same-Origin-Policy zu lockern und bestimmte cross-origin-Anfragen zu gestatten.
Wie funktioniert CORS?
CORS funktioniert durch eine Reihe von HTTP-Header. Wenn eine Webseite eine Anfrage an eine andere Domain stellt, fügt der Browser eine besondere Header namens Origin zur Anfrage hinzu. Der Server antwortet dann mit Header, die dem Browser mitteilen, ob die Anfrage gestattet ist.
Schauen wir uns ein einfaches Beispiel an:
<!DOCTYPE html>
<html>
<head>
<title>CORS Beispiel</title>
</head>
<body>
<h1>CORS in Aktion</h1>
<button onclick="makeRequest()">Anfrage senden</button>
<script>
function makeRequest() {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Fehler:', error));
}
</script>
</body>
</html>In diesem Beispiel versucht ein Klick auf den Button, Daten von https://api.example.com/data abzurufen. Wenn der Server bei api.example.com CORS korrekt konfiguriert hat, wird er Header in seiner Antwort enthalten, die Ihrer Webseite erlauben, auf die Daten zuzugreifen.
Eine CORS-Anfrage stellen
Nun tauchen wir tiefer ein, wie man eine CORS-Anfrage stellt. Wir verwenden die Fetch-API, die eine moderne, leistungsstarke Methode ist, um Netzwerkanfragen in JavaScript zu stellen.
fetch('https://api.example.com/data', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Fehler:', error));Dieser Code sendet eine GET-Anfrage an https://api.example.com/data. Die Antwort des Servers wird bestimmen, ob die Anfrage erfolgreich ist oder nicht.
Wenn CORS korrekt auf dem Server konfiguriert ist, werden Sie die Daten im Console-Protokoll sehen. Wenn nicht, erhalten Sie einen CORS-Fehler, der ungefähr so aussehen könnte:
Zugriff auf 'fetch' bei 'https://api.example.com/data' von Ursprung 'http://yourwebsite.com' wurde durch die CORS-Richtlinie blockiert: Kein 'Access-Control-Allow-Origin'-Header ist auf der angeforderten Ressource vorhanden.Panik nicht! Das bedeutet nur, dass der Server nicht konfiguriert ist, um Anfragen von Ihrer Webseite zu gestatten.
Ereignis-Handler in CORS
Wenn man mit CORS arbeitet, ist es wichtig, sowohl erfolgreiche Antworten als auch Fehler zu behandeln. Lassen Sie uns unser vorheriges Beispiel um einige Ereignis-Handler erweitern:
<!DOCTYPE html>
<html>
<head>
<title>CORS mit Ereignis-Handler</title>
</head>
<body>
<h1>CORS mit Ereignis-Handler</h1>
<button onclick="makeRequest()">Anfrage senden</button>
<div id="result"></div>
<script>
function makeRequest() {
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Netzwerkanwort war nicht in Ordnung');
}
return response.json();
})
.then(data => {
document.getElementById('result').textContent = JSON.stringify(data);
})
.catch(error => {
console.error('Fehler:', error);
document.getElementById('result').textContent = 'Ein Fehler ist aufgetreten: ' + error.message;
});
}
</script>
</body>
</html>In diesem Beispiel haben wir Ereignis-Handler für sowohl erfolgreiche Antworten als auch Fehler hinzugefügt. Wenn die Anfrage erfolgreich ist, zeigen wir die Daten auf der Seite an. Bei einem Fehler zeigen wir eine Fehlermeldung an.
CORS-Methoden
CORS unterstützt verschiedene HTTP-Methoden. Hier ist eine Tabelle mit den häufigsten:
| Methode | Beschreibung |
|---|---|
| GET | Holt Daten vom Server |
| POST | Sendet Daten an den Server, um eine neue Ressource zu erstellen |
| PUT | Sendet Daten, um eine vorhandene Ressource auf dem Server zu aktualisieren |
| DELETE | Fordert die Löschung einer Ressource auf dem Server an |
| HEAD | Ähnlich wie GET, aber holt nur Header, nicht den Body |
| OPTIONS | Wird verwendet, um die Kommunikationsoptionen für die Zielressource zu beschreiben |
Denken Sie daran, der Server muss konfiguriert sein, um diese Methoden für CORS-Anfragen zu gestatten.
Schlussfolgerung
Glückwunsch! Sie haben gerade Ihre ersten Schritte in die Welt der CORS gemacht. Wir haben was CORS ist, warum es notwendig ist und wie man grundlegende CORS-Anfragen macht, behandelt. Denken Sie daran, CORS dreht sich alles darum, das Web interaktiver zu gestalten und gleichzeitig Sicherheit zu gewährleisten.
Während Sie Ihre Reise im Web-Entwurf fortsetzen, werden Sie CORS in vielen verschiedenen Szenarien begegnen. Haben Sie keine Angst vor denen CORS-Fehlern – sie sind nur Gelegenheiten, mehr über die Funktionsweise des Webs zu lernen!
Weiters üben, neugierig bleiben und viel Spaß beim Coden!
Credits: Image by storyset