Teilen Sie Beispiele für die Verwendung von js zur Lösung domänenübergreifender Probleme

Was ist domänenübergreifend? Solange das Protokoll, der Domänenname oder der Port unterschiedlich sind, werden sie als unterschiedliche Domänen betrachtet.

URL                      说明       是否允许通信
http://www.a.com/a.jshttp://www.a.com/b.js    
 同一域名下   
 允许http://www.a.com/lab/a.jshttp://www.a.com/script/b.js 同一域名下不同文件夹 
 允许http://www.a.com:8000/a.jshttp://www.a.com/b.js     同一域名，不同端口  
 不允许http://www.a.com/a.jshttps://www.a.com/b.js 同一域名，不同协议 
 不允许http://www.a.com/a.jshttp://70.32.92.74/b.js 域名和域名对应ip 
 不允许http://www.a.com/a.jshttp://script.a.com/b.js 主域相同，子域不同 
 不允许http://www.a.com/a.jshttp://a.com/b.js 同一域名，不同二级域名（同上） 
 不允许（cookie这种情况下也不允许访问）http://www.cnblogs.com/a.jshttp://www.a.com/b.js 
 不同域名 不允许

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

Cross-Origin Resource Sharing (CORS)

CORS (Cross-Origin Resource Sharing) domänenübergreifende Ressourcenfreigabe definiert, wie Browser und Server beim Zugriff auf domänenübergreifende Ressourcen kommunizieren sollen. Die Grundidee von CORS 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.

<script type="text/javascript">
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "/trigkit4",true);
    xhr.send();</script>

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

<script type="text/javascript">
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "http://segmentfault.com/u/trigkit4/",true);
    xhr.send();</script>

Der Unterschied zwischen dem Code und dem vorherigen Zum einen wird der relative Pfad durch den absoluten Pfad anderer Domänen ersetzt, dh die 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 das domänenübergreifende Problem zu lösen, können wir die folgenden Methoden verwenden:

Domänenübergreifend durch 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. Es handelt sich lediglich um JSON, das in Funktionsaufrufen enthalten ist, zum Beispiel:

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

JSONP besteht aus zwei Teilen: Callback-Funktion 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. Beispiel:

<script type="text/javascript">
    function dosomething(jsondata){        //处理获得的json数据
    }</script><script src="http://example.com/data.php?callback=dosomething"></script>

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

af51e0c7e63f40281b69149f898faba2

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

Wenn Ihre Seite JQuery verwendet, wird sie von gekapselt Das Diese Methode macht es sehr bequem, JSONP-Vorgänge auszuführen.

<script type="text/javascript">
    $.getJSON(&#39;http://example.com/data.php?callback=?,function(jsondata)&#39;){        //处理获得的json数据
    });</script>

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 nicht, ruft sie die gewöhnliche Ajax-Methode auf. Wenn sie domänenübergreifend ist, ruft sie die JSONP-Rückruffunktion in Form eines asynchronen Ladens der JS-Datei auf.

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 weist eine bessere Kompatibilität auf und kann verwendet werden in älteren Browsern kann es auf jedem Server ausgeführt werden und erfordert keine Unterstützung von XMLHttpRequest oder ActiveX. Nach Abschluss der Anforderung kann das Ergebnis durch einen Rückruf 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 der Interaktion zweier Seiten in unterschiedlichen Domänen nicht lösen einander. Probleme beim Ausführen von JavaScript-Aufrufen.

Vergleich zwischen CORS und JSONP

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

    1、 JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。
    2、 使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。
    3、 JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS）。

Übergreifen Sie Subdomains durch Ändern von document.domain

Browser haben eine Same-Origin-Richtlinie, und eine ihrer Einschränkungen besteht darin, dass wir in der ersten Methode gesagt haben, dass sie keine Ajax-Methode an die Anforderung übergeben kann Dokumente aus verschiedenen Quellen. Die zweite Einschränkung besteht darin, dass js nicht zwischen Frames in verschiedenen Domänen im Browser interagieren kann.
Fensterobjekte können zwischen verschiedenen Frameworks abgerufen werden, die entsprechenden Eigenschaften und Methoden können jedoch nicht abgerufen werden. Beispielsweise gibt es eine Seite mit der Adresse http://www.example.com/a.html. Auf dieser Seite befindet sich ein Iframe, dessen Quelle offensichtlich http://example.com/b.html ist Die Seite und der darin enthaltene Iframe befinden sich in unterschiedlichen Domänen, daher können wir die Dinge im Iframe nicht abrufen, indem wir js-Code in die Seite schreiben:

<script type="text/javascript">
    function test(){        var iframe = document.getElementById(&#39;ifame&#39;);        var win = document.contentWindow;//可以获取到iframe里的window对象，但该window对象的属性和方法几乎是不可用的
        var doc = win.document;//这里获取不到iframe里的document对象
        var name = win.name;//这里同样获取不到window对象的name属性
    }</script><iframe id = "iframe" src="http://example.com/b.html" onload = "test()"></iframe>

Zu diesem Zeitpunkt kann document.domain Das ist praktisch. Wir müssen nur die document.domain der beiden Seiten http://www.example.com/a.html und http://example.com/b.html auf denselben Domänennamen setzen. 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.在页面 http://www.example.com/a.html 中设置document.domain:

<iframe id = "iframe" src="http://example.com/b.html" onload = "test()"></iframe><script type="text/javascript">
    document.domain = &#39;example.com&#39;;//设置成主域
    function test(){
        alert(document.getElementById(&#39;iframe&#39;).contentWindow);//contentWindow 可取得子窗口的 window 对象
    }</script>

2.在页面 http://example.com/b.html 中也设置document.domain:

<script type="text/javascript">
    document.domain = &#39;example.com&#39;;//在iframe载入这个页面也设置document.domain，使之与主页面的document.domain相同</script>

修改document.domain的方法只适用于不同子域的框架间的交互。

使用window.name来进行跨域

window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的

使用HTML5的window.postMessage方法跨域

window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。

相关推荐：

php关于ajax跨域问题解析

关于javascript中跨域问题的解决办法分享

关于js跨域问题的总结

Das obige ist der detaillierte Inhalt vonTeilen Sie Beispiele für die Verwendung von js zur Lösung domänenübergreifender Probleme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!