Cross-Domain-Technologie (JSONP und CROS)

JSONP

Wir haben festgestellt, dass der Aufruf von js-Dateien auf einer Webseite nicht davon abhängt, ob sie domänenübergreifend ist oder nicht. Alle Tags mit dem Attribut „src“ verfügen über domänenübergreifende Funktionen, wie z. B. < ;script>, a1f02c36ba31691bcfe87b2722de723b, d5ba1642137c3f32f4f4493ae923989c. Das heißt, wenn Sie domänenübergreifend auf Daten zugreifen möchten, kann der Server die Daten nur in Dateien im JS-Format ablegen. Zufällig wissen wir, dass JSON komplexe Daten prägnant beschreiben kann und JSON auch nativ von js unterstützt wird, sodass der Client Daten in diesem Format fast wie gewünscht verarbeiten kann. Dann kann der Client die dynamisch generierte js-Formatdatei auf dem domänenübergreifenden Server genauso aufrufen wie das Skript. Nachdem der Client die JSON-Datei erfolgreich aufgerufen hat, erhält er die benötigten Daten. Dies bildet das Grundkonzept von JSONP. Benutzer dürfen einen Rückrufparameter an den Server übergeben. Wenn der Server dann Daten zurückgibt, verwendet er diesen Rückrufparameter als Funktionsnamen zum Umschließen der JSON-Daten, sodass der Client seine eigene Funktion anpassen kann, um die zurückgegebenen Daten automatisch zu verarbeiten Daten.

function dll(response){
    alert(response.city);
}
var script=document.createElement("script");
script.src="http://freegeoip.net/json/?callback=dll";
document.body.insertBefore(script,document.body.firstChild);

Drei Schritte: Skript erstellen, src angeben und in das Dokument einfügen.

jQuery unterstützt JSONP-Aufrufe. Nachdem Sie den Namen der Rückruffunktion in einem anderen Domänennamen angegeben haben, können Sie das folgende Formular zum Laden von JSON-Daten verwenden.
url?callback=?
jQuery.getJSON(url + "&callback=?", function(data) {
warning(data.a + data.b);
});
Natürlich muss der Server auch JSONP-Unterstützung bieten. Tatsächlich muss er nur die Parameter für Lese- und Schreibrückrufe bereitstellen.
Cross-Origin Resource Sharing (CORS)
Cross-Origin Resource Sharing (CORS) ist ein W3c-Arbeitsentwurf, der definiert, wie Browser und Server beim domänenübergreifenden Zugriff auf Ressourcen kommunizieren. Die Grundidee von CORS besteht darin, benutzerdefinierte HTTP-Header zu verwenden, damit Browser und Server einander verstehen und feststellen können, ob die Anfrage oder Antwort erfolgreich war.

CORS ist fortschrittlicher, bequemer und zuverlässiger als JSONP.

1. JSONP kann nur GET-Anfragen implementieren, während CORS alle Arten von HTTP-Anfragen unterstützt.
2. Mit CORS können Entwickler gewöhnliches XMLHttpRequest verwenden, um Anfragen zu initiieren und Daten abzurufen, was eine bessere Fehlerbehandlung als JSONP bietet.
3. JSONP wird hauptsächlich von alten Browsern unterstützt, die CORS oft nicht unterstützen, während die meisten modernen Browser CORS bereits unterstützen.
Für eine einfache Anfrage ohne benutzerdefinierte Header verwenden Sie entweder GET oder POST. Der Text besteht aus Text/Einfach und die Anfrage wird mit einem zusätzlichen Header namens Origin gesendet. Der Origin-Header enthält die Header der angeforderten Seite (Protokoll, Domänenname, Port), sodass der Server leicht entscheiden kann, ob er eine Antwort bereitstellen soll.
Die Serverseite unterstützt CORS hauptsächlich durch die Festlegung von Access-Control-Allow-Origin.
Header set Access-Control-Allow-Origin *
Um zu verhindern, dass XSS unseren Server angreift, können wir die Domäne einschränken, z. B.
Access-Control-Allow-Origin: http://blog .csdn.net
Viele Dienste bieten bereits CORS-Unterstützung. Beispielsweise unterstützt AWS die domänenübergreifende Ressourcenfreigabefunktion CORS und für das Hochladen auf S3 ist kein Proxy erforderlich.