Wie kann ich domänenübergreifende AJAX-Anfragen beim Laden eines HTML-Endpunkts lösen?

Laden eines domänenübergreifenden Endpunkts mit AJAX

Cross-Origin Resource Sharing (CORS) ist ein Protokoll, das es Webbrowsern ermöglicht, Anfragen an Ressourcen in anderen Domänen zu stellen. Es gibt jedoch einige Einschränkungen, um eine böswillige Nutzung dieser Funktion zu verhindern.

Problem

Beim Versuch, eine domänenübergreifende HTML-Seite mit AJAX zu laden, können Probleme auftreten, es sei denn, der Datentyp lautet auf „jsonp“ setzen. Bei der Verwendung von JSONP erwartet der Browser jedoch einen Skript-Mime-Typ, empfängt aber stattdessen „text/html“. Darüber hinaus konnte das Problem durch die Verwendung des Parameters „crossDomain“ nicht behoben werden.

Lösung

Es gibt mehrere Ansätze zur Überwindung der domänenübergreifenden Barriere:

JSONP

JSONP (JSON with Padding) ist eine Technik, die domänenübergreifende AJAX-Anfragen ermöglicht, indem die Antwort in einen Funktionsaufruf eingeschlossen wird. Dies kann erreicht werden, indem der dataType-Parameter auf „jsonp“ gesetzt und eine Rückruffunktion als Erfolgshandler bereitgestellt wird.

$.ajax({
  type: "GET",
  url: "crossdomainendpoint.com",
  dataType: "jsonp",
  success: function(data) {
    // Handle the JSONP response
  }
});

CORS-Proxy

CORS-Proxys sind Zwischenserver, die dazu verwendet werden können Umgehen Sie die Same-Origin-Richtlinie. Sie fügen der Anfrage die erforderlichen Header hinzu, damit der Browser auf Ressourcen in anderen Domänen zugreifen kann. Mehrere seriöse CORS-Proxy-Dienste sind online verfügbar.

$.ajax({
  type: "GET",
  url: "https://cors-proxy.com/crossdomainendpoint.com",
  dataType: "json",
  success: function(data) {
    // Handle the CORS response
  }
});

CORS Anywhere

CORS Anywhere ist ein beliebter CORS-Proxy-Server, der zum Abrufen von Ressourcen von jeder Domäne verwendet werden kann.

$.ajaxPrefilter(function(options) {
  if (options.crossDomain && $.support.cors) {
    options.url = "https://cors-anywhere.herokuapp.com/" + options.url;
  }
});

$.ajax({
  type: "GET",
  url: "crossdomainendpoint.com",
  dataType: "json",
  success: function(data) {
    // Handle the CORS response
  }
});

Whatever Origin

Whatever Origin ist eine Open-Source-Bibliothek, die JSONP verwendet, um domänenübergreifend zu ermöglichen Anfragen.

$.ajax({
  type: "GET",
  url: "http://whateverorigin.org/get?url=" + encodeURIComponent("crossdomainendpoint.com"),
  dataType: "jsonp",
  success: function(data) {
    // Handle the JSONP response
  }
});

Beachten Sie, dass diese Techniken zwar dazu beitragen können, domänenübergreifende Einschränkungen zu überwinden, es jedoch wichtig ist, Auswirkungen auf die Sicherheit zu berücksichtigen und die Grundsätze der Same-Origin-Richtlinie einzuhalten, wenn Sie mit externen Ressourcen arbeiten.

Das obige ist der detaillierte Inhalt vonWie kann ich domänenübergreifende AJAX-Anfragen beim Laden eines HTML-Endpunkts lösen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!