Eine kurze Analyse der domänenübergreifenden Probleme von js und ein Vergleich der Vor- und Nachteile von Lösungen_Javascript-Fähigkeiten

Was ist domänenübergreifend?

Konzept: Solange Protokoll, Domänenname und Port unterschiedlich sind, werden sie als unterschiedliche Domänen betrachtet.

Code kopieren Der Code lautet wie folgt:

Die URL zeigt an, ob die Kommunikation erlaubt ist
http://www.a.com/a.js
http://www.a.com/b.js Zulässig unter demselben Domainnamen
http://www.a.com/lab/a.js
http://www.a.com/script/b.js Verschiedene Ordner unter demselben Domänennamen sind zulässig
http://www.a.com:8000/a.js
http://www.a.com/b.js Gleicher Domainname, unterschiedliche Ports nicht zulässig
http://www.a.com/a.js
https://www.a.com/b.js Gleicher Domainname, unterschiedliche Protokolle nicht zulässig
http://www.a.com/a.js
http://70.32.92.74/b.js Der Domänenname und die dem Domänennamen entsprechende IP sind nicht zulässig
http://www.a.com/a.js
http://script.a.com/b.js Die Hauptdomain ist dieselbe, aber die Subdomains sind unterschiedlich
http://www.a.com/a.js
http://a.com/b.js Gleicher Domänenname, unterschiedliche Domänennamen der zweiten Ebene (wie oben) Nicht zulässig (in diesem Fall ist der Zugriff auf Cookies nicht zulässig)
http://www.cnblogs.com/a.js
http://www.a.com/b.js Unterschiedliche Domainnamen sind nicht zulässig

Unterschiede in Ports und Protokollen können nur im Hintergrund behoben werden.

Cross-Origin Resource Sharing (CORS)

Die domänenübergreifende Ressourcenfreigabe CROS (Cross-Origin Resource Sharing) definiert, wie Browser und Server beim Zugriff auf domänenübergreifende Ressourcen kommunizieren sollen. Die Grundidee von CROS besteht darin, benutzerdefinierte HTTP-Header zu verwenden, um dem Browser die Kommunikation mit dem Server zu ermöglichen, um zu bestimmen, ob die Anfrage oder Antwort erfolgreich sein soll oder fehlschlagen soll.

Code kopieren Der Code lautet wie folgt:

Das obige trigkit4 ist ein relativer Pfad. Wenn wir CORS verwenden möchten, könnte der relevante Ajax-Code so aussehen:

Code kopieren Der Code lautet wie folgt:

Der Unterschied zwischen dem Code und dem vorherigen besteht darin, dass der relative Pfad durch den absoluten Pfad anderer Domänen ersetzt wird, also der Schnittstellenadresse, auf die Sie domänenübergreifend zugreifen möchten.

Die Serverseite unterstützt CORS hauptsächlich durch die Einstellung Access-Control-Allow-Origin. Wenn der Browser die entsprechenden Einstellungen erkennt, kann er den domänenübergreifenden Ajax-Zugriff ermöglichen.

Um domänenübergreifende Probleme zu lösen, können wir die folgenden Methoden verwenden:

Domänenübergreifend über JSONP

Jetzt kommt die Frage? Was ist JSONP? Die Wikipedia-Definition lautet: JSONP (JSON mit Padding) ist ein „Nutzungsmodus“ des Datenformats JSON, der es Webseiten ermöglicht, Daten von anderen Domänen anzufordern.

JSONP, auch gepolstertes JSON genannt, ist eine neue Methode zur Anwendung von JSON, bei dem es sich lediglich um JSON handelt, das in Funktionsaufrufen enthalten ist, zum Beispiel:

Code kopieren Der Code lautet wie folgt:

callback({"name","trigkit4"});

JSONP besteht aus zwei Teilen: Rückruffunktion und Daten. Die Rückruffunktion ist die Funktion, die auf der Seite aufgerufen werden soll, wenn die Antwort eintrifft, und die Daten sind die JSON-Daten, die an die Rückruffunktion übergeben werden.

In js ist es nicht möglich, XMLHttpRequest direkt zum Anfordern von Daten in verschiedenen Domänen zu verwenden. Es ist jedoch möglich, js-Skriptdateien aus verschiedenen Domänen auf der Seite einzuführen. JSONP verwendet diese Funktion, um dies zu erreichen. Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

">http://example.com/data.php?callback=dosomething">>

Nachdem die JS-Datei erfolgreich geladen wurde, wird die Funktion, die wir im URL-Parameter angegeben haben, ausgeführt und die benötigten JSON-Daten werden als Parameter übergeben. Daher erfordert JSONP eine entsprechende Zusammenarbeit von der serverseitigen Seite.

Code kopieren Der Code lautet wie folgt:

$callback = $_GET['callback'];//Den Namen der Rückruffunktion abrufen
$data = array('a','b','c');//Zurückzugebende Daten
echo $callback.'('.json_encode($data).')';//Output
?>

Das Ausgabeergebnis lautet schließlich: dosomething(['a','b','c']);

Wenn Ihre Seite JQuery verwendet, können Sie JSONP-Vorgänge problemlos über die gekapselte Methode ausführen.

Code kopieren Der Code lautet wie folgt:

jquery generiert automatisch eine globale Funktion, um das Fragezeichen in Callback =? zu ersetzen, und wird dann nach Erhalt der Daten automatisch zerstört. Tatsächlich fungiert es als temporäre Proxy-Funktion. Die $.getJSON-Methode ermittelt automatisch, ob es sich um eine domänenübergreifende Methode handelt. Wenn sie nicht domänenübergreifend ist, ruft sie die normale Ajax-Methode auf. Wenn sie domänenübergreifend ist, ruft sie die JSONP-Rückruffunktion asynchron auf Laden der js-Datei.

Vor- und Nachteile von JSONP

Der Vorteil von JSONP besteht darin, dass es nicht durch dieselbe Ursprungsrichtlinie eingeschränkt ist wie die vom XMLHttpRequest-Objekt implementierte Ajax-Anfrage. Es verfügt über eine bessere Kompatibilität und kann in älteren Browsern ohne die Unterstützung von XMLHttpRequest oder ActiveX ausgeführt werden Ist der Vorgang abgeschlossen, kann das Ergebnis durch einen Callback-Aufruf zurückgegeben werden.

Die Nachteile von JSONP sind: Es unterstützt nur GET-Anfragen, aber keine anderen Arten von HTTP-Anfragen wie POST; es unterstützt nur domänenübergreifende HTTP-Anfragen und kann das Problem beim Durchführen von JavaScript-Aufrufen zwischen zwei Seiten in verschiedenen Domänen nicht lösen.

Vergleich zwischen CROS und JSONP

CORS ist zweifellos 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, und die meisten modernen Browser unterstützen CORS bereits.
Übergreifen Sie Subdomains, indem Sie document.domain

ändern

Alle Browser haben eine Same-Origin-Richtlinie, und eine ihrer Einschränkungen besteht darin, dass wir bei der ersten Methode gesagt haben, dass Sie Ajax nicht verwenden können, um Dokumente aus verschiedenen Quellen anzufordern. Die zweite Einschränkung besteht darin, dass js nicht zwischen Frames in verschiedenen Domänen im Browser interagieren kann.
Das Fensterobjekt kann zwischen verschiedenen Frameworks abgerufen werden, die entsprechenden Eigenschaften und Methoden können jedoch nicht abgerufen werden. Beispielsweise gibt es eine Seite, deren Adresse http://www.example.com/a.html ist. Auf dieser Seite befindet sich ein Iframe, dessen Quelle http://example ist .com/b.html, offensichtlich befinden sich diese Seite und der darin enthaltene Iframe in unterschiedlichen Domänen, sodass wir den Inhalt im Iframe nicht erhalten können, indem wir js-Code in die Seite schreiben:

Code kopieren Der Code lautet wie folgt:

Zu diesem Zeitpunkt kann sich document.domain als nützlich erweisen. Wir müssen nur http://www.example.com/a.html und http://example.com hinzufügen / b.htmlSetzen Sie einfach die document.domain dieser beiden Seiten auf denselben Domainnamen. Es ist jedoch zu beachten, dass die Einstellung von document.domain begrenzt ist. Wir können document.domain nur auf sich selbst oder eine übergeordnete Domäne einer höheren Ebene festlegen und die Hauptdomäne muss dieselbe sein.

1. Legen Sie document.domain: auf der Seite http://www.example.com/a.html

fest

Code kopieren Der Code lautet wie folgt:

2. Legen Sie außerdem document.domain: auf der Seite http://example.com/b.html fest

Code kopieren Der Code lautet wie folgt:

Die Methode zum Ändern von document.domain ist nur auf Interaktionen zwischen Frames in verschiedenen Subdomains anwendbar.