クロスドメインとは何ですか?クロスドメインの実装形態はいくつありますか?

クロスドメインはjsでよく発生しますが、この記事で詳しく説明します。

同一生成元ポリシーは優れたセキュリティメカニズムですが、異なるドメインからデータを取得したり対話したりする必要がある場合、同一生成元ポリシーが障害を引き起こすことがあります。
クロスドメインとは、異なるソースからのデータ情報の送信と相互作用を実現することです。
クロスドメインを実現するにはいくつかの方法があります:
1.JSONP
JSONP は JSON with Padding (parametric JSON) の略称で、JSON の新しい適用方法です。
JSONP の実装は、動的 3f1c4e4b6b16bbbd69b2ee476dc4f83a 要素の使用に依存します。これは、3f1c4e4b6b16bbbd69b2ee476dc4f83a が同一生成元ポリシーによって制限されず、他のドメインからリソースをロードする機能があるためです。 3f1c4e4b6b16bbbd69b2ee476dc4f83a request

<script src=""http://freegeoip.net/json/?callback=handleResponse></script>

によって返される JSONP は、コールバック関数と JSON データの 2 つの部分で構成されます

handleResponse(JSON)

3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを通じてリクエストされたデータは、JS コードとして実行されるため、コールバック関数は JSON データを処理します。この例では、コールバック関数は handleResponse です。通常、コールバック関数名はパラメータとしてリクエスト URL に書き込まれ、コールバック関数はローカルに定義されます。

欠点: JSONP は実行のために他のドメインからコードをロードします。他のドメインが安全でない場合、応答には悪意のあるコードが含まれている可能性があります。現時点では、JSONP の使用を中止する以外にそれを追求する方法はありません。データソースを確保する必要があります。
2.CORS
CORS (Cross-Origin Resource Sharing、クロスオリジン リソース共有) は、Ajax クロスドメイン リクエストのメソッドであり、クロスドメイン リソースにアクセスする必要がある場合にブラウザとサーバーがどのように通信するかを定義します。 CORS の背後にある基本的な考え方は、定義された HTTP ヘッダーを使用して、ブラウザーがサーバーと通信して、リクエストまたはレスポンスが成功するかどうかを判断できるようにすることです。
CORS は、次の 2 つの条件を同時に満たす単純なリクエストに分類されます。
1. リクエスト メソッドが get、post、head のいずれかである。
2. リクエスト ヘッダー情報が含まれない。これらのタイプを超えるフィールド: Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type は、application/x-www-form-urlencoded、multipart/form-data、text/ の 3 つの値に制限されます。プレーン
単純なリクエストの例:
ドメイン間で単純なリクエストを送信する場合、リクエストのソースを示すために Origin ヘッダーが定義されます

Oring: http://www.baidu.com //このリクエストが http であることを示します://www.baidu.com

サーバーがリクエストが受け入れられると判断した場合、Access-Control-Allow-Origin ヘッダーで同じソース情報を返します (公開リソースであると仮定すると、「」を返すことができます) *")

Access-Control-Allow -Origin: http://www.baidu.com

そのようなヘッダーが存在しない場合、またはヘッダーのソース情報が一致しない場合、ブラウザは返された応答を傍受します。 。
単純なリクエストを除いて、それらはすべて複雑なリクエストです

複雑なリクエストは単純なリクエストと似ていますが、正式なリクエストを送信する前に、現在のドメインがサーバーの許可範囲内にあるかどうか、およびどのようなHTTPが許可されているかを確認するためにプリフライトリクエストが送信される点が異なります。サーバーが受け入れることができるヘッダー情報、リクエストメソッド、データ型など。許可が得られるまで正式なコミュニケーションは開始されません。

以下はプリフライト リクエスト ヘッダーとレスポンス ヘッダーです

//これはプリフライト リクエスト ヘッダーです。 OPTIONS /cors HTTP/1.1 //リクエストはオプションを返すことに注意してください。 Origin: https://api.qiutc.me //Request source ; Access-Control-Request-Method: PUT // リクエストメソッド Access-Control-Request-Headers:
Connection: keep-alive

User-Agent: Mozilla/5.0...

// これはプリフライト応答ヘッダー HTTP /1.1 200 OKDate: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0 .61 (Unix)
Access-Control-Allow-Origin: https://api.qiutc.meAccess-Control-Allow- Methods: GET、POST、PUT //サーバーによってサポートされているすべてのクロスドメイン メソッド Access-Control-Allow を示します -Headers: : Keep-Alive
Content-Type: text/plain

この記事では、クロスドメイン関連の問題について説明します詳細については、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

関数イベントの概要

正規表現の関連理解

JavaScriptでのこれの使用

以上がクロスドメインとは何ですか?クロスドメインの実装形態はいくつありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。