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>, ,
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.