jQuery Ajaxノート
- ブラウザのセキュリティ制限により、ほとんどのAjaxリクエストには同じオリジンポリシーが適用されます。リクエストは、別のドメイン、サブドメイン、ポート、またはプロトコルからデータを正常に取得できません。
- スクリプトおよびJSONPリクエストは、同じオリジンポリシー制限の対象ではありません。
クロスドメインバリアを克服する方法はいくつかあります。
クロスドメインリクエストに役立つプラグインがいくつかあります。
注意喚起！
この問題を克服する最良の方法は、バックエンドに独自のプロキシを作成することです。これにより、プロキシは他のドメインのサービスをポイントします。これは、バックエンドに同じ発信元ポリシーの制限が存在しないためです。ただし、それをバックエンドで実行できない場合は、次のヒントに注意してください。
警告！
サードパーティのプロキシは、データを追跡できるため、公開情報で使用できるが、プライベートデータでは使用できないため、安全な方法ではありません。
以下に示すコード例では、jQuery.get（）とjQuery.getJSON（）を使用しています。どちらもjQuery.ajax（）の省略メソッドです
CORS Anywhere
CORS Anywhereは、プロキシされたリクエストにCORSヘッダーを追加するnode.jsプロキシです。
APIを使用するには、URLの前にAPI URLを付けます。（httpsをサポート：githubリポジトリを参照）
必要に応じてクロスドメインリクエストを自動的に有効にする場合は、次のスニペットを使用します。
$.ajaxPrefilter( function (options) {
if (options.crossDomain && jQuery.support.cors) {
var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
//options.url = "http://cors.corsproxy.io/url=" + options.url;
}
});
$.get(
'http://en.wikipedia.org/wiki/Cross-origin_resource_sharing',
function (response) {
console.log("> ", response);
$("#viewer").html(response);
});
どんな起源
どんなオリジンもクロスドメインjsonpアクセスです。これは、anyorigin.comの代替となるオープンソースです。
google.comからデータを取得するには、次のスニペットを使用できます。
// It is good specify the charset you expect.
// You can use the charset you want instead of utf-8.
// See details for scriptCharset and contentType options:
// http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings
$.ajaxSetup({
scriptCharset: "utf-8", //or "ISO-8859-1"
contentType: "application/json; charset=utf-8"
});
$.getJSON('http://whateverorigin.org/get?url=' +
encodeURIComponent('http://google.com') + '&callback=?',
function (data) {
console.log("> ", data);
//If the expected response is text/plain
$("#viewer").html(data.contents);
//If the expected response is JSON
//var response = $.parseJSON(data.contents);
});
CORSプロキシ
CORSプロキシは、任意のWebサイトのCORS要求を有効にする単純なnode.jsプロキシです。これにより、サイトのJavaScriptコードが、同じ生成元のポリシーのために通常はブロックされる他のドメインのリソースにアクセスできるようになります。
どのように機能しますか？CORSプロキシは、HTML 5とともに追加された機能であるクロスオリジンリソースシェアリングを利用します。サーバーは、他のWebサイトがホストするリソースをリクエストすることをブラウザーに許可することをサーバーに指定できます。CORSプロキシは、「誰でも要求できる」という応答にヘッダーを追加する単なるHTTPプロキシです。
これは、目標を達成するもう1つの方法です（www.corsproxy.comを参照）。あなたがしなければならないすべてはhttp：//とwwwを取り除くことです。プロキシされるURLから、URLの前にwww.corsproxy.com/
$.get(
'http://www.corsproxy.com/' +
'en.wikipedia.org/wiki/Cross-origin_resource_sharing',
function (response) {
console.log("> ", response);
$("#viewer").html(response);
});
CORSプロキシブラウザー
最近私はこれを見つけました、それは様々なセキュリティ指向のクロスオリジンリモート共有ユーティリティを含みます。しかし、それはバックエンドとしてフラッシュを備えたブラックボックスです。
実際の動作は次の場所で確認できます：CORSプロキシブラウザー
GitHubでソースコードを取得：koto / cors-proxy-browser