0Pricing
jQuery Academy · Lektion

Cross-Domain-AJAX (CORS/JSONP)

Verstehen und verwenden Sie Techniken für Cross-Domain-AJAX-Anfragen mit JSONP oder durch die Konfiguration von CORS-Headern auf dem Server, um einen sicheren Datenaustausch zu ermöglichen.

Cross-Domain-AJAX (CORS/JSONP) ist eine kostenlose jQuery Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des jQuery Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der jQuery Academy-Kurs umfasst insgesamt 3 Lektionen.

Domainübergreifendes AJAX: Die Herausforderung

Wenn Ihre Website versucht, Daten von einer anderen Website abzurufen, wird dies als domainübergreifende AJAX-Anfrage bezeichnet. Das ist oft knifflig.

Standardmäßig verfügen Webbrowser über eine Sicherheitsregel, die verhindert, dass eine Webseite Anfragen an eine andere Domain als ihre Ursprungsdomain stellt. Diese Regel schützt Ihre Daten.

Die Same-Origin-Policy verstehen

Die gerade erwähnte Sicherheitsregel heißt Same-Origin-Policy (SOP). Sie ist eine grundlegende Sicherheitsfunktion von Browsern.

Die SOP legt fest, dass ein Webbrowser Skripten aus einer ersten Webseite nur dann den Zugriff auf Daten einer zweiten Webseite erlaubt, wenn beide Webseiten denselben Origin (Domain, Protokoll und Port) haben.

  • Beispiel: Eine Seite von mywebsite.com kann nicht direkt Daten von api.anotherdomain.com abrufen.

CORS: Eine moderne Lösung

Um domainübergreifende Anfragen sicher zu erlauben, hat die Web-Community Cross-Origin Resource Sharing (CORS) entwickelt. Dies ist die moderne, standardisierte Vorgehensweise.

CORS funktioniert, indem der Server dem Browser ausdrücklich mitteilt, dass bestimmte andere Domains auf seine Ressourcen zugreifen dürfen.

CORS: Konfiguration auf der Serverseite

CORS wird hauptsächlich auf dem Server konfiguriert, der die Daten bereitstellt. Der Server sendet in seiner Antwort spezielle HTTP-Header, die angeben, welche Origins zulässig sind.

Der wichtigste Header ist Access-Control-Allow-Origin. Er legt fest, welche Domains auf die Ressource zugreifen dürfen.

  • Access-Control-Allow-Origin: * (erlaubt jede Domain)
  • Access-Control-Allow-Origin: https://yourdomain.com (erlaubt nur eine bestimmte Domain)

CORS: jQuery-Clientanfragen

Auf der Clientseite (mit jQuery) unterscheidet sich eine CORS-Anfrage oft nicht von einer gewöhnlichen AJAX-Anfrage, sofern der Server korrekt konfiguriert ist.

jQuery übernimmt die Kommunikation auf Browserebene. Sie müssen Ihren Aufruf von $.ajax() lediglich auf die domainübergreifende URL verweisen.

$.ajax({
  url: "https://api.example.com/data", // Server must allow CORS
  method: "GET",
  success: function(data) {
    console.log("CORS success:", data);
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error("CORS Error:", textStatus, errorThrown);
  }
});

CORS: Preflight-Anfragen (OPTIONS)

Bei bestimmten "komplexen" CORS-Anfragen führen Browser vor dem Senden der eigentlichen Anfrage eine Preflight-Anfrage durch. Dies ist ein zusätzlicher Sicherheitsschritt.

Eine Preflight-Anfrage verwendet die HTTP-Methode OPTIONS, um den Server um Erlaubnis zu bitten. Wenn der Server diese erteilt, sendet der Browser anschließend die eigentliche Anfrage (z. B. PUT, DELETE oder Anfragen mit benutzerdefinierten Headern).

JSONP: Eine ältere Alternative

Bevor CORS weit verbreitet war, wurde JSONP (JSON with Padding) häufig als Workaround für domainübergreifende Anfragen verwendet, insbesondere bei älteren Browsern oder APIs.

JSONP umgeht die Same-Origin-Policy, indem es auf kreative Weise die Möglichkeit des Browsers nutzt, <script>-Tags von jeder Domain zu laden.

JSONP: Der Mechanismus

So funktioniert JSONP:

  • Sie erstellen dynamisch ein <script>-Tag und setzen dessen src-Attribut auf die domainübergreifende URL.
  • Der Server erwartet eine JSONP-Anfrage und verpackt seine JSON-Daten in einen Funktionsaufruf (das sogenannte „Padding“).
  • Der Browser führt dieses Skript aus und ruft eine global definierte Funktion auf Ihrer Seite auf, wobei er die Daten als Argument übergibt.

JSONP: Implementierung mit jQuery

jQuery vereinfacht die Implementierung von JSONP erheblich. Sie müssen lediglich dataType: "jsonp" in Ihrem Aufruf von $.ajax() angeben.

jQuery übernimmt automatisch das Erstellen des dynamischen <script>-Tags, das Erzeugen eines eindeutigen Callback-Funktionsnamens und dessen Ausführung, sobald die Antwort eintrifft.

$.ajax({
  url: "https://api.example.com/jsonp-data?callback=?", // Server must support JSONP
  dataType: "jsonp",
  success: function(data) {
    console.log("JSONP success:", data);
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error("JSONP Error:", textStatus, errorThrown);
  }
});

CORS vs. JSONP: Die wichtigsten Unterschiede

Obwohl beide Verfahren Probleme mit domainübergreifenden Anfragen lösen, weisen CORS und JSONP unterschiedliche Merkmale auf:

  • CORS: Moderner Standard, verwendet HTTP-Header, sicher, unterstützt alle HTTP-Methoden, Konfiguration auf der Serverseite erforderlich.
  • JSONP: Älterer Workaround, verwendet <script>-Tags, weniger sicher, nur GET-Anfragen, clientseitige Technik, Server muss die Antwort verpacken.

Schnelltest: Domainübergreifende Anfragen

Welche der folgenden Aussagen zu domainübergreifenden AJAX-Anfragen sind RICHTIG?

Rückblick: Domainübergreifende Anfragen meistern

Sie haben gelernt, wie Sie die Same-Origin-Policy bei domainübergreifenden AJAX-Anfragen umgehen können.

  • CORS ist der moderne, sichere Standard und verwendet serverseitige HTTP-Header zur Erteilung der Berechtigung.
  • JSONP ist ein älterer, weniger sicherer Workaround für GET-Anfragen, der dynamische <script>-Tags verwendet.

Bevorzugen Sie nach Möglichkeit immer CORS, da es sicherer und flexibler ist. JSONP ist hauptsächlich für Altsysteme oder bestimmte Szenarien gedacht.

Häufig gestellte Fragen

Ist die Lektion „Cross-Domain-AJAX (CORS/JSONP)“ kostenlos?

Ja — der vollständige Text von „Cross-Domain-AJAX (CORS/JSONP)“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des jQuery Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der jQuery Academy-Kurs umfasst insgesamt 3 Lektionen.

Was lerne ich in „Cross-Domain-AJAX (CORS/JSONP)“?

Verstehen und verwenden Sie Techniken für Cross-Domain-AJAX-Anfragen mit JSONP oder durch die Konfiguration von CORS-Headern auf dem Server, um einen sicheren Datenaustausch zu ermöglichen. Du übst jQuery Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um jQuery Academy zu starten?

Keine Vorkenntnisse erforderlich. jQuery Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 3.

Wie lange dauert die Lektion „Cross-Domain-AJAX (CORS/JSONP)“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser jQuery Academy-Lektion Code schreiben und ausführen?

Ja. Jede jQuery Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. AJAX-Anfragen effektiv konfigurieren
  2. AJAX-Fehler und -Erfolge verarbeiten
  3. Cross-Domain-AJAX (CORS/JSONP)
← Zurück zu jQuery Academy