多くの場合、Web開発にはクロスドメインの問題に直面する必要があります。クロスドメインの問題の根本的な原因は、ブラウザーセキュリティにおける同じオリジナル戦略です。たとえば、http：//www.a.com/1.htmlの場合：
1。http：//www.a.com/2.htmlは相同です。
2。https：//www.a.com/2.htmlは、プロトコルが異なるため、さまざまなソースからのものです。
3。http：//www.a.com:8080/2.htmlは、ポートが異なるため、さまざまなソースからのものです。
4。http：//sub.a.com/2.htmlは、ホストが異なるため、さまざまなソースからのものです。
ブラウザでは、Tags <script>、<img>、<iframe>、<link>は、クロスドメイン（非相性）リソースをロードでき、ロード方法は実際には通常のGETリクエストと同等です。唯一の違いは、セキュリティのために、ブラウザはこの方法でロードされたリソースの読み取りおよび書き込み操作を許可していないが、タグ自体が持つべき機能（スクリプト実行、スタイルアプリケーションなど）のみを使用できることです。
最も一般的なクロスドメインの問題は、AJAXのクロスドメインアクセス問題です。デフォルトでは、クロスドメインURLにAjaxを介してアクセスできません。ここでは、クロスドメインの方法について学んだことを記録します。
1。サーバー側のプロキシ、言うことは何もありません。欠点は、デフォルトでは、AJAX要求を受信するサーバーがクライアントのIPとUAを取得できないことです。
2。IFRAME 、IFRAMEを使用することは、実際には新しいWebページを開くのと同等です。特定のクロスドメイン法は、ほぼドメインAによって開かれた親ページであり、ドメインBを指すiframeをネストし、データを提出します。完了後、Bのサーバーは以下を行うことができます。
●302リダイレクト応答を返し、結果をドメインAに戻します。
●このiframe内のAドメインを指すiframeをネストします。
これらは両方とも最終的にクロスドメインコールを実装します。この方法は、以下に導入されたJSONPよりも機能的に強力です。なぜなら、クロスドメインの完了後、DOM操作とJavaScriptの呼び出しには問題がないため、URLパラメーターに渡される場合など、いくつかの制限があります。 IFRAME自体によって引き起こされる別の問題があり、親ページとIFRAME自体の間の相互作用にはセキュリティ制限があります。
3.スクリプトタグを使用してクロスドメインに、この方法も非常に一般的です。スクリプトタグは、foreign javascriptをロードして実行できます。事前にセットのコールバック関数は、親ページとの相互作用を実現できます。 JSONPクロスドメインと呼ばれる有名人があります。これは、パディングを備えたJSONの略語です。これは明らかにスクリプトをロードする非公式のプロトコルなので、なぜJSONに関連しているのですか？このコールバック関数であることがわかりました。それを使用する典型的な方法があります。つまり、JSONを介してパラメーターを渡すことです。つまり、JSONデータをコールバック関数に記入します。これは、JSONPのJSON+パディングの意味です。
データを提供するために、インターネット上には多くのJSONPサービスがあります。本質的に、それらはクロスドメイン要求であり、コールバック= resultなどのリクエストURLでコールバックを指定します。このデータを取得すると、結果関数が自動的に呼び出され、たとえば（「サッカー」の検索）。
http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=football&callback=result
jqueryを使用してそれを呼び出し、次のように書きます。
コードコピーは次のとおりです。
$ .getjson（ "http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=football&callback=？"、function（data）{
// ...
}）;
一般に、JSONPのクロスドメインアプローチの制限は、GETリクエストのみを使用でき、異なるドメインの2ページ間でJavaScriptコールを作成する方法の問題を解決できないことです。
4。フラッシュクロスドメイン：
ターゲットWebサイトのルートディレクトリの下にあるCrossDomain.xmlファイルにアクセスし、ファイル内のコンテンツに基づいてこのクロスドメインアクセスを許可するかどうかを決定します。
コードコピーは次のとおりです。
<Cross-Domain-Policy>
<Allow-Access-from domain = "xxx.xxx.com" />
</cross-domain-policy>
5。IMGタグも使用できますが、これも非常に一般的な方法です。関数が弱く、コールバックなしでのみGETリクエストを送信できます。これは、Googleのクリックカウントの決定方法です。
6。window.postmessageは、クロスドメイン通信のために新たに追加されたメカニズムであり、Firefox 3、Safari 4、IE8およびその後のバージョンのみによってサポートされています。それを使用して他のウィンドウにメッセージを送信するための呼び出しは次のとおりです。
コードコピーは次のとおりです。
otherwindow.postmessage（message、targetorigin）;
受信ウィンドウで、送信されたメッセージを受信するためにイベントハンドラーを設定する必要があります。
コードコピーは次のとおりです。
window.addeventlistener（ "message"、receivemessage、false）;
関数recivemessage（event）{
if（event.orgin！== "http://example.org:8080"）
戻る;
}
メッセージの原点とソースの属性を使用して、送信者のIDを確認する必要があることに注意してください。そうしないと、XSSの脆弱性を引き起こすことに注意してください。
7。アクセス制御
一部のブラウザは、次のようなアクセス制御ヘッダーをサポートしています。
コードコピーは次のとおりです。
ヘッダー（ "Access-Control-Allow-origin：http：//www.a.com"）;
これは、www.a.comへのクロスドメインアクセスが許可されていることを指定します。
8。Window.Name
このことは、実際にはXSSをハッキングする手段として使用されました。本質は、ウィンドウの場所が変更されると、ページがリロードされますが、興味深いことに、window.nameが変更されないため、値を渡すために使用できます。 iframeを使用して、iframeのウィンドウオブジェクトを数回変更し、実際のクロスドメインデータ転送が完了します。
9。Document.Domain
この方法は、a.example.comやb.example.comなどのクロスドメイン通信に適しています。これは、example.comと呼ばれる共通ドメインを持っているためです。 document.domainにexample.comに設定するだけですが、a.example1.comとb.example2.comの間で通信したい場合は、選択肢がありません。
10。フラグメント識別子メッセージ（FIM）
この方法は非常に興味深いものであり、Iframesの協力が必要です。フラグメント識別子は、URLのポンドマーク（＃）の後のアンカーポジショニングによく使用される部分です。この部分の変更は、ページの更新を引き起こしません。女性のウィンドウは、iframeのURLに自由にアクセスでき、iframeは女性ウィンドウのURLにもアクセスできます。次に、フラグメメントを識別子を変更することで通信を実現できます。欠点は、フラグメメント識別の変化が不必要な履歴を生成し、長さの制限を持つことです。さらに、一部のブラウザでは、Onhashchangeイベントをサポートしていません。
11。クロスフレーム（CF）
この方法は、上記のFIMメソッドのバリアントです。 CFとFIMの本質は、実際に私の記事「GWT First Experience」で紹介されています（履歴と後方機能を実装するために使用されます）。外国のドメインを指して、目に見えないIFrameを動的に作成します。処理後、このiframeのURLのフラグメントには、親ページがアクセスする処理結果が含まれていますが、ブラウザのURLには変更がありません。
12。Cookie+P3Pプロトコル
P3Pプロトコルの下でクロスドメインアクセスCookieの特性を使用してクロスドメインアクセスを実現することも奇妙なトリックです。 P3Pは、W3Cがリリースしたプライバシー保護推奨基準標準であり、インターネットをサーフィンするインターネットユーザーにプライバシー保護を提供することを目指しています。 Cookieのパスを「/」に設定します。つまり、ドメインの制限はありません。現時点では、一部のブラウザでは、他のURLのページを読み取ることができますが、他のブラウザーは読み取られていません。この場合、P3Pヘッダーは、親ページ応答のヘッドに設定する必要があります。
コードコピーは次のとおりです。
p3p：cp = "cura adma deva psao psdo us uni uni pur int dem sta pre com otc noi dsp cor"