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

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

ブラウザの同一オリジンポリシーは、クロスサイトスクリプティング攻撃を防ぐために、クライアント側のスクリプト (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 オブジェクトは同一オリジンポリシーの影響を受けますが、