ホームページ > 記事 > ウェブフロントエンド > js を使用してクロスドメインの問題を解決する例を共有する

js を使用してクロスドメインの問題を解決する例を共有する

小云云オリジナル: 2018-03-13 15:22:191635ブラウズ

クロスドメインとは何ですか?プロトコル、ドメイン名、ポートが異なれば、別のドメインとみなされます。

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 
 不同域名 不允许

ポートとプロトコルの違いは、バックグラウンドでのみ解決できます。

Cross-Origin Resource Sharing (CORS)

CORS (Cross-Origin Resource Sharing) クロスドメインリソース共有は、クロスドメインリソースにアクセスするときにブラウザとサーバーが通信する方法を定義します。 CORS の背後にある基本的な考え方は、カスタム HTTP ヘッダーを使用して、ブラウザーがサーバーと通信して、要求または応答が成功するか失敗するかを判断できるようにすることです。

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

上記の trigkit4 は相対パスです。CORS を使用する場合、関連する Ajax コードは次のようになります。

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

このコードと前のコードの違いは、相対パスが絶対パスに置き換えられることです。つまり、ドメインにアクセスするにはインターフェイスアドレスを越える必要があります。

サーバー側は主に Access-Control-Allow-Origin を設定することで CORS をサポートします。ブラウザーが対応する設定を検出すると、Ajax クロスドメインアクセスを許可できます。

クロスドメインの問題を解決するには、次の方法を使用できます:

jsonp を介したクロスドメイン

さて、質問が来ますか? jsonpとは何ですか? Wikipedia の定義は次のとおりです。 JSONP (JSON with Padding) は、データ形式 JSON の「使用モード」であり、Web ページが他のドメインからデータを要求できるようにします。

JSONP (パデッド JSON とも呼ばれます) は、関数呼び出しに JSON が含まれているだけの JSON を適用する新しい方法です。例:

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

JSONP は、コールバック関数とデータの 2 つの部分で構成されます。コールバック関数は、応答が来たときにページ内で呼び出される関数であり、データはコールバック関数に渡される JSON データです。

js では、XMLHttpRequest を直接使用して、異なるドメインのデータをリクエストすることはできません。ただし、jsonp はこの機能を使用してページ上に異なるドメインの js スクリプトファイルを導入することができます。例:

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

js ファイルが正常に読み込まれた後、url パラメーターで指定した関数が実行され、必要な json データがパラメーターとして渡されます。したがって、jsonp はサーバー側ページからの対応する連携を必要とします。

af51e0c7e63f40281b69149f898faba2

最終的に、出力結果は次のようになります: dosomething(['a','b','c']);

ページで jquery を使用している場合は、そのカプセル化されたメソッドを通じて jsonp 操作を簡単に実行できます。

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

jquery は、callback=? の疑問符を置き換えるグローバル関数を自動的に生成し、データを取得した後、それを自動的に破棄します。実際には、これは一時的なプロキシ関数として機能します。 $.getJSON メソッドは、クロスドメインであるかどうかを自動的に判断し、そうでない場合は通常の ajax メソッドを呼び出します。クロスドメインである場合は、js ファイルを非同期にロードする形式で jsonp コールバック関数を呼び出します。

JSONP の長所と短所

JSONP の利点は次のとおりです。XMLHttpRequest オブジェクトによって実装される Ajax リクエストのような同一生成元ポリシーによって制限されず、互換性が高く、XMLHttpRequest や ActiveX をサポートしていなくても古いブラウザーで実行できます。リクエストが完了したら、コールバックを呼び出すことで結果を返すことができます。

JSONP の欠点は、GET リクエストのみをサポートし、POST などの他のタイプの HTTP リクエストはサポートしないこと、クロスドメイン HTTP リクエストのみをサポートし、異なるドメインの 2 つのページ間で JavaScript 呼び出しを行う方法を解決できないことです。

CORS と JSONP の比較

JSONP と比較すると、CORS は間違いなくより高度で、便利で、信頼性が高くなります。

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

document.domain を変更してサブドメインを横断する

ブラウザーにはすべて同一生成元ポリシーが適用されます。その制限の 1 つは、最初の方法で、異なるソースからのドキュメントを ajax 経由でリクエストできないことです。 2 番目の制限は、js がブラウザー内の異なるドメインのフレーム間で対話できないことです。
異なるフレームワーク間ではウィンドウオブジェクトは取得できますが、対応するプロパティやメソッドは取得できません。たとえば、アドレスが http://www.example.com/a.html であるページがあり、このページには iframe があり、その src は明らかに http://example.com/b.html です。ページとその内部の iframe フレームは異なるドメインにあるため、ページに js コードを記述しても iframe 内の情報を取得することはできません:

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

このとき、document.domain が便利です。ドキュメントを設定するだけです。 http://www.example.com/a.html と http://example.com/b.html の 2 つのページのドメインを同じドメイン名に変更します。ただし、document.domain の設定は制限されており、document.domain はそれ自体または上位レベルの親ドメインにのみ設定でき、メインドメインは同じである必要があることに注意してください。

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方法。