クロスドメインとは何ですか？
概念：プロトコル、ドメイン名、またはポートに違いがある限り、それは別のドメインと見なされます。
コードコピーは次のとおりです。
URLは、通信が許可されているかどうかを示します
http://www.a.com/a.js
http://www.a.com/b.js同じドメイン名で許可されています
http://www.a.com/lab/a.js
http://www.a.com/script/b.js同じドメイン名の下にあるさまざまなフォルダーが許可されています
http://www.a.com:8000/a.js
http://www.a.com/b.js同じドメイン名、異なるポートは許可されていません
http://www.a.com/a.js
https://www.a.com/b.js同じドメイン名、異なるプロトコルでは許可されていません
http://www.a.com/a.js
http://70.32.92.74/b.jsドメイン名とドメイン名はIPに対応しています
http://www.a.com/a.js
http://script.a.com/b.jsメインドメインは同じですが、サブドメインは許可されていません
http://www.a.com/a.js
http://a.com/b.js同じドメイン名、異なるセカンダリドメイン名（上記と同じ）は許可されていません（この場合はCookieにアクセスできません）
http://www.cnblogs.com/a.js
http://www.a.com/b.jsさまざまなドメイン名は許可されていません
ポートとプロトコルの違いは、バックグラウンドでのみ解決できます。
クロスドメインリソース共有（CORS）
CROS（クロスオリジンリソース共有）クロスドメインリソース共有は、クロスドメインリソースにアクセスするときにブラウザとサーバーが通信する方法を定義します。 CROSの背後にある基本的なアイデアは、カスタムHTTPヘッダーを使用して、ブラウザーがサーバーと通信できるようにし、それにより、要求または応答が成功するか失敗するかを決定することです。
コードコピーは次のとおりです。
<script type = "text/javascript">
var xhr = new xmlhttprequest（）;
xhr.open（ "get"、 "/trigkit4"、true）;
xhr.send（）;
</script>
上記のtrigkit4は相対パスです。 CORを使用したい場合、関連するAJAXコードは次のようになる場合があります。
コードコピーは次のとおりです。
<script type = "text/javascript">
var xhr = new xmlhttprequest（）;
xhr.open（ "get"、 "http://segmentfault.com/u/trigkit4/"、true）;
xhr.send（）;
</script>
コードと前のコードの違いは、相対パスが他のドメインの絶対パス、つまりドメイン間でアクセスするインターフェイスアドレスに置き換えることです。
CORSのサーバー側のサポートは、主にアクセスコントロールオリジンを設定することで達成されます。ブラウザが対応する設定を検出した場合、Ajaxはドメイン全体でアクセスできるようになります。
クロスドメインの問題を解決するために、次の方法を使用できます。
JSONP経由のクロスドメイン
今、質問は？ JSONPとは何ですか？ Wikipediaの定義は次のとおりです。JSONP（パディング付きJSON）は、データ形式JSONの「使用モード」です。これにより、Webページは他のドメインから情報を要求できます。
JSONPはFill-in JSONとも呼ばれます。 JSONを適用するための新しい方法ですが、たとえば、機能呼び出しに含まれるJSONにすぎません。
コードコピーは次のとおりです。
callback（{"name"、 "trigkit4"}）;
JSONPは、コールバック関数とデータの2つの部分で構成されています。コールバック関数は、応答が到着したときにページで呼び出される関数であり、データはjsonデータがコールバック関数に渡されたものです。
JSでは、xmlhttprequestを使用して異なるドメインのデータを直接リクエストすることはできません。ただし、ページ上のさまざまなドメインにJSスクリプトファイルを導入することは問題ありません。JSONPはこの機能を使用してそれを実現します。例えば：
コードコピーは次のとおりです。
<script type = "text/javascript">
function dosomathing（jsondata）{
//取得したJSONデータを処理します
}
</script>
<スクリプトsrc = "http://example.com/data.php?callback=dosomething"> </scrip>
JSファイルが正常にロードされた後、URLパラメーターで指定した関数が実行され、必要なJSONデータがパラメーターとして渡されます。したがって、JSONPは、それに応じて協力するためにサーバー側のページを必要とします。
コードコピーは次のとおりです。
<？php
$ callback = $ _get ['callback']; //コールバック関数名を取得します
$ data = array（ 'a'、 'b'、 'c'）; //返されるデータ
echo $ callback。 '（'。json_encode（$ data）。 '）'; // output
？>
最後に、出力は次のとおりです。
ページがjQueryを使用している場合、カプセル化方法を使用してJSONP操作を非常に便利に実行できます。
コードコピーは次のとおりです。
<script type = "text/javascript">
$ .getjson（ 'http://example.com/data.php?callback=?,function（jsondata）'）{
//取得したJSONデータを処理します
}）;
</script>
jQueryは、Callback =？の疑問符を置き換えるグローバル関数を自動的に生成し、その後、データを取得した後に自動的にデータを破壊します。実際、一時的なエージェント機能の役割を果たします。 $ .GETJSONメソッドは、それがクロスドメインであるかどうかを自動的に決定します。クロスドメインでない場合、通常のAjaxメソッドを呼び出します。クロスドメインの場合、JSファイルの非同期負荷の形でJSONPコールバック関数を呼び出します。
JSONPの長所と短所
JSONPの利点は次のとおりです。XMLHTTPREQUESTオブジェクトによって実装されたAJAX要求のような相同ポリシーによって制限されていません。 XMLHTTPRequestまたはActiveXのサポートなしで、より優れた互換性を持ち、古いブラウザで実行できます。リクエストが完了した後、コールバックを呼び出すことで結果を返すことができます。
JSONPの欠点は、Postなどの他のタイプのHTTP要求ではなく、GETリクエストのみをサポートすることです。クロスドメインHTTP要求のみをサポートしており、異なるドメイン内の2ページ間でJavaScriptコールを作成する方法の問題を解決することはできません。
CROSとJSONPの比較
JSONPと比較して、CORSは間違いなくより高度で、便利で信頼性があります。
1。JSONPはGETリクエストのみを実装できますが、CORSはあらゆるタイプのHTTPリクエストをサポートします。
2. CORSを使用して、開発者は通常のXMLHTTPREQUESTを使用してリクエストを開始し、JSONPよりもエラー処理が優れているデータを取得できます。
3。JSONPは主に古いブラウザでサポートされています。多くの場合、CORをサポートしておらず、ほとんどの最新のブラウザはすでにCORをサポートしています）。
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（ 'ifame'）;
var win = document.contentWindow; // iframeでウィンドウオブジェクトを取得できますが、ウィンドウオブジェクトのプロパティとメソッドはほとんど利用できません
var doc = win.document; // iframeのドキュメントオブジェクトはここで取得できません
var name = win.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は同じドメイン名に。ただし、document.domainの設定が制限されていることに注意する必要があります。 document.domainは独自の親ドメインまたはより高い親ドメインにのみ設定でき、メインドメインは同じでなければなりません。
1.ページのdocument.domainを設定http://www.example.com/a.html：
コードコピーは次のとおりです。
<iframe id = "iframe" src = "http://example.com/b.html" onload = "test（）"> </iframe>
<script type = "text/javascript">
document.domain = 'emple.com'; //メインドメインとして設定します
function test（）{
alert（document.getElementById（ 'Iframe'）。ContentWindow）; // contentWindowチャイルドウィンドウのウィンドウオブジェクトを取得できます
}
</script>
2.ページのDocument.domainも設定しますhttp://example.com/b.html：
コードコピーは次のとおりです。
<script type = "text/javascript">
document.domain = 'emple.com'; //このページをiframeにロードしてdocument.domainを設定して、document.domainと同じようにします。
</script>
Document.domainを変更する方法は、異なるサブドメインを持つフレームワーク間の相互作用にのみ適しています。