Die perfekte Lösung für domänenübergreifende Anfragen (JSONP, CORS) (Bild- und Text-Tutorial, mit Code)

Jetzt bringe ich Ihnen eine perfekte Lösung für domänenübergreifende Anfragen (JSONP, CORS). Lassen Sie mich es jetzt mit Ihnen teilen und es allen als Referenz geben.

Ein bekanntes Problem besteht darin, dass Ajax normale Dateien direkt anfordert, was zu unbefugtem domänenübergreifendem Zugriff führt. Zu den Lösungen gehören JSONP, Flash usw.

JSONP

Wir haben festgestellt, dass es beim Aufrufen von js-Dateien auf einer Webseite keinen Einfluss darauf hat, ob sie domänenübergreifend ist oder nicht . Alle Dateien mit dem Attribut „src“ Alle Tags verfügen über domänenübergreifende Funktionen, wie z. B. 3f1c4e4b6b16bbbd69b2ee476dc4f83a, 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.

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) { 
 alert(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-Arbeitsplatz Entwurf: Es 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 Hauptteil besteht aus Text/Plain 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 Domänen einschränken, z als

Access-Control-Allow-Origin: http://www.jb51.net

Viele Dienste bieten bereits CORS-Unterstützung, wie z Da AWS die domänenübergreifende Ressourcenfreigabefunktion CORS unterstützt, ist zum Hochladen auf S3 kein Proxy erforderlich.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Konzentrieren Sie sich auf die Techniken zum Umschreiben der Methode „alert()“ in JavaScript

Grundlegende Syntax und Variablen von JavaScript erklären

Javascript-Simulationsüberladung, detaillierte Antworten zum Umschreiben der toString-Methode

Das obige ist der detaillierte Inhalt vonDie perfekte Lösung für domänenübergreifende Anfragen (JSONP, CORS) (Bild- und Text-Tutorial, mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!