1. ブラウザの同一生成元ポリシー
「同じオリジン」: 同じプロトコル、同じドメイン名、同じポート
「同一ソース目的」: 1 つのサーバー上のファイルのみが相互にやり取りでき、複数のサーバー間のファイルは禁止されています
1995 年に、Netscape によってブラウザに同一オリジン ポリシーが導入されました. 当初の目的は、特定のページによって設定された Cookie を、その "同一オリジン" ページによってのみ開くことができるようにすることでした. 2 つのページのプロトコル、ドメイン名、およびポートが同じである場合、2 つのページは同じオリジンに属し、いずれかが異なる限り、別のオリジンです。
たとえば、Web サイト http://www.example.com/dir/page.html の場合、プロトコルは http://、ドメイン名は www.example.com、ポートは 80 です (デフォルトのポートは省略します）。その相同性は次のとおりです。
| http://www.example.com/dir2/other.html | 同種 |
| http://example.com/dir/other.html | 異なるオリジン (異なるドメイン名) |
| http://v2.www.example.com/dir/other.html | 異なるオリジン (異なるドメイン名) |
| http://www.example.com:81/dir/other.html | 異なるソース (異なるポート) |
目的: 同一生成元ポリシーの目的は、ユーザー情報のセキュリティを確保し、悪意のある Web サイトがデータを盗むのを防ぐことです。
制限: インターネットの発展に伴い、「同一オリジン ポリシー」がますます厳しくなっています。現在、同じオリジンでない場合に制限される 3 つの動作があります。
(1) Cookie、LocalStorage、IndexDB が読み込めない。
(2)DOMが取得できない
(3) AJAXリクエストが送信できない
何事にも一長一短があり、制限は必要ですが、場合によっては「同一オリジンポリシー」によって合理的な利用にも影響が出ます。したがって、上記の制限を回避するために紹介するいくつかの方法は、[クロスドメイン]の起源です。
二、ajaxクロスドメイン
Ajax クロスドメインとは、Ajax でクロスドメイン メソッドを提供するのではなく、Ajax リクエストのクロスドメイン処理を指します。同一オリジン ポリシーでは、Ajax リクエストは同じオリジンの URL にのみ送信できることが明確に規定されています。そうしないと、クロスドメイン エラーが発生します。プロキシの設定に加えて、ページ上のクロスドメインの問題を解決する 3 つの一般的な方法があります。
①サーバーレスポンスヘッダーの設定
②エージェント
③JSONP
3. JSONP クロスドメイン (get リクエストのみサポート)
JSONP は、サーバーとクライアント間のクロスオリジン通信の最も一般的な方法です。最大の特徴は、シンプルで適用可能であること、旧式のブラウザーがすべてサポートされていること、サーバーの変換が非常に小さいことです。
要点：実際にスクリプトタグを使ってjsファイルを導入し、実行原理を説明する
手順
①. html にスクリプト タグを挿入し、スクリプト タグを使用してクロスオリジン リクエストを開始する
②. サーバー上の対応する php ファイル内の文字列を連結して、関数呼び出しをシミュレートします。そして、返されるデータは、コールバック関数のパラメーターを介して返されます。
③.htmlページにコールバック関数を明示的に記述します。このように、クロスオリジン リクエストが完了すると、対応するコールバック関数が自動的に実行されます。
アドバンテージ：
(1) スクリプト script をリクエストとして使用するため、実際にはリクエストと従来のインポートされた js スクリプトに違いはありません。
(2) 返されたデータでは、js 呼び出し関数の構文もシミュレートしようとします。そのため、コールバック関数がページで宣言されている限り、自動的に呼び出されます。
(3) さらに、パラメータとして使用される[サーバー側]の JSON データは、js で直接オブジェクトとして認識されるため、コールバック関数で JSON.parse を使用するステップも回避されます。
4. 面接ポイント
(1) JSONP が本当の AJAX ではない理由
JSONP は、スクリプトで SRC 属性を使用してパラメーターを運び、データを転送します。XMLHttpRequest オブジェクトとは関係ありません。
本質的に異なる:
ajax の核心は、XMLHttpRequest を介して非ページ コンテンツを取得することです。
jsonp のコアは、スクリプト タグを動的に追加して、サーバーによって提供される js スクリプトを呼び出すことです。
jsonp は get リクエストのみをサポートし、ajax は get および post リクエストをサポートします