クロスドメインの詳細な紹介

クロスドメイン戦略を学ぶには、まずクロスドメインの理由を知る必要があります:

ブラウザの同一オリジンポリシーは、クロスサイトスクリプティング攻撃を防ぐために、クライアント側のスクリプト (JavaScript など) がクロスドメインを実行することを禁止しています。 -site は、異なるドメインのサービスを呼び出します。

より具体的には、Web サイトが要求するプロトコル名、ホスト、またはポート番号のいずれかが異なる場合、Web サイト間のデータ送信はクロスドメイン呼び出しを形成します。

この記事のすべての例は、サーバーとして Node.js を使用して実行されます。同時に、異なるポート番号の例も示されています。今回は 2 つの

ポート番号が使用されます。

まず、図に示すようにフォームを構築します:

通常の非クロスドメインリクエストの場合、通常は次のようになります:

html:

Front-end js部分 (ajax) :

サーバーコード:

注: post メソッドの内容は、Node.js の強力なモジュールを使用してここで読み取られます。すべての post データは、これを使用して受け入れられます。

リクエストページによって返される結果は次のとおりです:

現在の戻り結果はポート3001にアクセスするものなので、ポート3002にアクセスするとどうなるでしょうか?

はい！彼はこうなってしまったのです！ポート番号を越えたアクセスは許可していません。 ！ ！

しかし、サーバー コンソールには次の出力があります:

これは何を意味しますか?次に、コードを添付して少しずつ説明します:

ajax リクエスト部分の値が変更されました url 部分:

つまり、ポート番号 3001 が 3002 に置き換えられ、残りはまったく同じです上記と同じです。

サーバー コードは、ポート 3002 をリッスンする点を除いて、上記と同じです。

このコードを通して、ポート番号が異なっていても、ajax のサーバーは引き続き実行できることがわかります。フロントデスクからデータを受け取ります

つまり、上記の制御です。ステーションによって出力されたデータは、サーバーがクロスサイトリクエストを拒否しているのではなく、サーバー

が制限されており、サーバーによって傍受されていることを示しています。ブラウザがデータを受信して​​戻り値を処理するとき。

もちろん、クロスドメイン制限を解決するには多くの方法がありますが、ここではそのうちの 4 つを紹介します:

1. JSONP を使用してクロスドメイン呼び出しを実装する

まず、JSONP について段落で紹介します。 :

JSONP は JSON の一部です この使用モデルは、主流のブラウザーのクロスドメイン データ アクセスの問題を解決できます。原則として、XmlHttpRequest オブジェクトは同一オリジン ポリシーの影響を受けますが、<script> タグ要素はクロスドメイン サーバーにスクリプトを読み込むことができ、Web ページは動的に生成できます。他のソースからの JSON データ。 JSONP を使用して取得された </script>

は JSON データではなく、直接実行できる JavaScript ステートメントです。

（1）Jqueryの$ajaxを使ってjsonpを実装する

diedie は jsonp の実装に使用されます この時点で、ブラウザコンソールは次のように出力します:

」これを見てください:

これは上記のリクエストのhttpヘッダー情報です。URLは実際にはgetメソッドに従ってパラメータを渡すため、サーバーはgetメソッドを使用してデータを受け取ります

。

gt;

（2）JSネイティブ＆lt; script＆gt;を使用して、クリックしてヘッドノードに追加し、リクエストの返された結果としてSRCを設定します。サイドコードと上記のjsonpも同じ);

ネイティブスクリプトタグメソッドを通して、jsonpには次の欠点があることがわかります:

1.リクエストの送信にはgetメソッドしか使用できません

2.同時に, この方法はajaxとは関係がないため、デバイスの状態を監視するためのイベントを登録できず、エラーを簡単に検出できません。

2.CORS はクロスドメイン呼び出しを実装します

別の段落を借りて CORS を紹介します:

Cross-Origin Resource Sharing (CORS) クロスオリジン リソース共有はブラウザ テクノロジの仕様です。ブラウザーの同一生成元ポリシーを回避するために、Web サービスが異なるドメインからサンドボックス スクリプトを送信する方法を提供します。これは、JSONP モードの最新バージョンです。 JSONP とは異なり、CORS は GET リクエスト メソッドに加えて他の HTTP リクエストもサポートします。

を使用すると、Web デザイナーは一般的な XMLHttpRequest を使用できるようになり、JSONP よりも優れたエラー処理が可能になります。一方、JSONP は CORS をサポートしていない古いブラウザーでも動作します。最新のブラウザは CORS をサポートしています。

CORS の場合、これらのヘッダー メッセージを記述するだけで済み、残りの部分はブラウザーが自動的に実行します。

CROSの利点は明らかで、get、post、putなどのマルチモードリクエストをサポートできます。送信には依然としてXmlHttpRequestを使用します ステータスを監視するためにイベントを登録でき、エラー処理が優れています。
もちろん、下位バージョンのブラウザをサポートしていないという欠点もあります。

以上がクロスドメインの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。