クロスドメイン戦略を学ぶには、まずクロスドメインの理由を知る必要があります:
ブラウザの同一オリジンポリシーは、クロスサイトスクリプティング攻撃を防ぐために、クライアント側のスクリプト (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 オブジェクトは同一オリジン ポリシーの影響を受けますが、
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
