クロスドメインのリソース共有

1. クロスオリジンリソース共有とは何ですか?

CORS (Cross-Origin Resource Sharing、クロスオリジンリソース共有) は、あるサイトのリソースを使用して、異なるオリジンを持つ別のサイトのリソースにアクセスすることです。カスタム HTTP ヘッダーを使用すると、ブラウザとサーバーが通信して、リクエストまたは応答が成功したか失敗したかを判断できます。

2. クロスドメイン リソース共有を使用する理由

クロスドメイン セキュリティ ポリシーの制限により、Ajax 通信は XHR を通じて実装され、XHR オブジェクトはそれを含むページと同じドメイン内のリソースにのみアクセスできます。実際のアプリケーションでは、 タグを介した外部スタイル シート ファイルのロード、 タグを介した外部スクリプト ファイルのロードなどはすべてクロスドメイン リクエストを必要とします。

3.CORS の実装

IE の CORS の実装

クロスドメイン ファイルのリクエスト

var xdr = new XDomainRequest();xdr.onload = function(){    alert(xdr.responseText);};xdr.onerror=function(){    alert("an error occurred");};xdr.open("get", "http://www.baidu.com/resource/");xdr.send();

サーバー ファイル

header("Access-Control-Allow-Origin:http://www.baidu.com/resource/");//允许的相应的源header("Access-Control-Allow-Method:http:POST,GET");//允许的方法header("Access-Control-Allow-Header:http:NCZ");//允许的头部header("Access-Control-Max-Age:http:86400");//请求缓存多长时间

firefox、safari、chrome の CORS の実装

var xhr=new createXHR();xhr.onreadystatechange=function(){    if(xhr.readystate==4){        if((xhr.status>=200&&xhr.status<300)||xhr.status==304){            alert(xhr.responseText);        }    }else{        alert("request was failed:"+xhr.status);    }};xhr.open("get", "http://www.baidu.com/resource/");xdr.send();

4.その他のクロスドメイン ドメインテクノロジー

JSONP (Padding Filled JSON またはパラメーター化された JSON を含む JSON)

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

例:

<script type="text/javascript"> function handleResponse(response){ //处理获得的json数据 }</script><script src="http://example.com/data.php?callback=handleResponse"></script>//一个JSONP的请求

まず、最初のスクリプト ノートはデータを処理する関数を定義します。

次に、2 番目のスクリプト タグが js ファイルをロードします。 http://example.com/data.php はデータです。アドレスですが、js として導入されているため、http://example.com/data.php は実行可能な js ファイルを返す必要があります

最終的な js ファイルが正常にロードされた後、url パラメータとで指定された関数を実行します。必要な json データをパラメータとして渡します。したがって、php は次のようになります

<?php$callback = $_GET['callback'];//得到回调函数名$data = array('a','b','c');//要返回的数据echo $callback.'('.json_encode($data).')';//输出

出力結果は次のとおりです: handleResponse(['a','b','c']);

jsonp はサーバー側ページからの対応する連携を必要とします。

画像 ping

Comet

サーバー送信イベント

Web Sockets

Web SSockets による SSE