クロスドメインリクエスト (JSONP、CORS) に対する完璧なソリューション (画像とテキストのチュートリアル、コード付き)

今度は、クロスドメインリクエスト (JSONP、CORS) に対する完璧なソリューションをお届けします。今からそれを皆さんと共有し、皆さんの参考にしてください。

よく知られている問題は、Ajax が通常のファイルを直接リクエストするため、クロスドメインの不正アクセスが発生することです。ソリューションには、JSONP、Flash などが含まれます。

JSONP

Web ページ上で js ファイルを呼び出す場合、「src」属性を持つすべてのタグにはクロスドメイン機能があることがわかりました。 3f1c4e4b6b16bbbd69b2ee476dc4f83a、a1f02c36ba31691bcfe87b2722de723b、d5ba1642137c3f32f4f4493ae923989c として。つまり、ドメインを越えてデータにアクセスしたい場合、サーバーはデータを js 形式のファイルに置くことしかできません。たまたま、JSON が複雑なデータを簡潔に記述できることがわかっており、JSON も js でネイティブにサポートされているため、クライアントはこの形式のデータをほぼ希望どおりに処理できます。その後、クライアントは、スクリプトを呼び出すのとまったく同じ方法で、クロスドメイン サーバー上で動的に生成された js 形式のファイルを呼び出すことができます。クライアントは JSON ファイルの呼び出しに成功すると、必要なデータを取得します。これが JSONP の基本概念を形成します。ユーザーはコールバック パラメーターをサーバーに渡すことができ、サーバーがデータを返すときに、このコールバック パラメーターを関数名として使用して JSON データをラップし、クライアントが独自の関数をカスタマイズして返されたデータを自動的に処理できるようにします。データ。

jQuery は JSONP 呼び出しをサポートしています。別のドメイン名でコールバック関数名を指定した後、次のフォームを使用して JSON データをロードできます。

url?callback=?
jQuery.getJSON(url + "&callback=?", function(data) { 
 alert(data.a + data.b); 
});

もちろん、サーバーは JSONP サポートも提供する必要があります。実際には、読み取りおよび書き込みコールバックのパラメーターを提供するだけで済みます。

Cross-Origin Resource Sharing (CORS)

Cross-Origin Resource Sharing (CORS) は、ドメインを越えてリソースにアクセスするときにブラウザーとサーバー間で通信する方法を定義する W3c 作業草案です。 CORS の背後にある基本的な考え方は、カスタム HTTP ヘッダーを使用して、ブラウザーとサーバーが相互に理解し、要求または応答が成功したかどうかを判断できるようにすることです。

JSONP と比較して、CORS はより高度で、便利で、信頼性があります。

1. JSONP は GET リクエストのみを実装できますが、CORS はすべての種類の HTTP リクエストをサポートします。

2. CORS を使用すると、開発者は通常の XMLHttpRequest を使用してリクエストを開始し、データを取得できます。これにより、JSONP よりも優れたエラー処理が可能になります。

3. JSONP は主に古いブラウザーでサポートされており、多くの場合 CORS をサポートしていませんが、最新のブラウザーのほとんどはすでに CORS をサポートしています。

カスタムヘッダーのない単純なリクエストの場合は、GET または POST を使用し、その本文は text/plain で、リクエストは Origin と呼ばれる追加ヘッダーとともに送信されます。 Origin ヘッダーには、要求されたページのヘッダー (プロトコル、ドメイン名、ポート) が含まれているため、サーバーは応答を提供する必要があるかどうかを簡単に決定できます。

サーバー側は主に Access-Control-Allow-Origin を設定することで CORS をサポートします。

Header set Access-Control-Allow-Origin *

XSS によるサーバーの攻撃を防ぐために、

Access-Control-Allow-Origin: http:/ などのドメインを制限できます。 /www. jb51.net

すでに多くのサービスが CORS をサポートしています。たとえば、AWS はクロスドメイン リソース共有機能 CORS をサポートしており、S3 へのアップロードにプロキシは必要ありません。

上記は私があなたのためにまとめたものです。

関連記事:

JavaScriptでalert()メソッドをオーバーライドする手法の分析に焦点を当てる

JavaScriptの基本構文と変数の説明

JavaScriptのシミュレートされたオーバーロード、toStringの書き換えに関する詳細な回答メソッド

以上がクロスドメインリクエスト (JSONP、CORS) に対する完璧なソリューション (画像とテキストのチュートリアル、コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。