クロスドメインテクノロジー (JSONP および CROS)

JSONP

Web ページで js ファイルを呼び出す場合、「src」属性を持つすべてのタグには、3f1c4e4b6b16bbbd69b2ee476dc4f83a や < などのクロスドメイン機能があることがわかりました。 ;img>、

function dll(response){
    alert(response.city);
}
var script=document.createElement("script");
script.src="http://freegeoip.net/json/?callback=dll";
document.body.insertBefore(script,document.body.firstChild);

3 つのステップ: スクリプトを作成し、src を指定し、ドキュメントに挿入します。

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 をサポートします。
ヘッダー セット Access-Control-Allow-Origin *
サーバーへの XSS 攻撃を防ぐために、
Access-Control-Allow-Origin: http://blog.csdn.net
多くのサービスなどのドメインを制限できますCORS サポートにより、たとえば AWS はクロスドメイン リソース共有機能 CORS をサポートしており、S3 へのアップロードにプロキシは必要ありません。