クロスドメイン AJAX リクエストに対する CORS 制限をバイパスするにはどうすればよいですか?

AJAX を使用したクロスドメイン エンドポイントのロード

はじめに

クロスオリジン リソース共有 (CORS) の制限により、AJAX リクエストがさまざまな場所からデータを取得するのが妨げられる場合があります。ドメイン。この記事では、CORS の制限を克服するための代替アプローチを検討します。

CORS の制限について

セキュリティ対策のため、ブラウザでは同一オリジン ポリシーが適用され、同じドメイン内の AJAX リクエストが制限されます。通常、別のドメイン、サブドメイン、ポート、またはプロトコルへのリクエストはブロックされます。

JSONP の回避

JSONP を使用してクロスドメイン データを取得するには、サーバーがスクリプト形式で応答を提供する必要があります。期待されるデータが HTML である場合、JSONP の使用は適切ではありません。

代替ソリューション

1. CORS プロキシの代替:

• CORS Anywhere: プロキシされたリクエストに CORS ヘッダーを追加します。
• オリジンを問わず: クロスドメイン JSONP アクセスを提供します。
• CORS プロキシ: あらゆるリクエストに対して CORS リクエストを有効にする Node.js プロキシウェブサイト。

2.同一オリジン制限のバイパス:

• サードパーティ プロキシの使用 (セキュリティ上の懸念のため推奨されません)。
• クロスドメイン リクエストを処理するバックエンド プロキシの作成.

CORS プロキシ例

CORS Anywhere:

$.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;
  }
});

起源を問わず:

$.ajaxSetup({
    scriptCharset: "utf-8",
    contentType: "application/json; charset=utf-8"
});

$.getJSON('http://whateverorigin.org/get?url=' + 
    encodeURIComponent('http://google.com') + '&callback=?',
    function (data) {
        console.log(" > " , data);
        $("#viewer").html(data.contents);
});

結論

これらの代替アプローチでは、直接リクエストが CORS によって制限されている場合でも、クロスドメイン AJAX リクエストが可能になります。最適なソリューションの選択は、特定の使用例とセキュリティ上の考慮事項によって異なります。

以上がクロスドメイン AJAX リクエストに対する CORS 制限をバイパスするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。