HTML エンドポイントをロードするときにクロスドメイン AJAX リクエストを解決するにはどうすればよいですか?

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

クロスオリジン リソース共有 (CORS) は、Web ブラウザーが他のドメイン上のリソースにリクエストを送信できるようにするプロトコルです。ただし、この機能の悪意のある使用を防ぐために、いくつかの制限が設けられています。

問題

AJAX を使用してクロスドメイン HTML ページをロードしようとすると、dataType が「jsonp」に設定します。ただし、JSONP を使用すると、ブラウザはスクリプト MIME タイプを予期しますが、代わりに「text/html」を受け取ります。さらに、crossDomain パラメータを使用しても問題は解決していません。

解決策

クロスドメインの障壁を克服するには、いくつかのアプローチがあります。

JSONP

JSONP (JSON with Padding) は、応答を関数呼び出しでラップすることにより、クロスドメイン AJAX リクエストを可能にする技術です。これは、dataType パラメーターを「jsonp」に設定し、成功ハンドラーとしてコールバック関数を提供することで実現できます。

$.ajax({
  type: "GET",
  url: "crossdomainendpoint.com",
  dataType: "jsonp",
  success: function(data) {
    // Handle the JSONP response
  }
});

CORS プロキシ

CORS プロキシは、次の目的で使用できる中間サーバーです。同一生成元ポリシーをバイパスします。必要なヘッダーをリクエストに追加して、ブラウザーが他のドメイン上のリソースにアクセスできるようにします。いくつかの信頼できる CORS プロキシ サービスがオンラインで利用できます。

$.ajax({
  type: "GET",
  url: "https://cors-proxy.com/crossdomainendpoint.com",
  dataType: "json",
  success: function(data) {
    // Handle the CORS response
  }
});

CORS Anywhere

CORS Anywhere は、任意のドメインからリソースを取得するために使用できる人気のある CORS プロキシ サーバーです。

$.ajaxPrefilter(function(options) {
  if (options.crossDomain && $.support.cors) {
    options.url = "https://cors-anywhere.herokuapp.com/" + options.url;
  }
});

$.ajax({
  type: "GET",
  url: "crossdomainendpoint.com",
  dataType: "json",
  success: function(data) {
    // Handle the CORS response
  }
});

Whatever Origin

Whatever Origin は、以下を使用するオープンソース ライブラリです。 JSONP を使用してクロスドメイン リクエストを有効にします。

$.ajax({
  type: "GET",
  url: "http://whateverorigin.org/get?url=" + encodeURIComponent("crossdomainendpoint.com"),
  dataType: "jsonp",
  success: function(data) {
    // Handle the JSONP response
  }
});

これらの手法はクロスドメインの制限を克服するのに役立ちますが、外部と連携する場合はセキュリティへの影響を考慮し、同一オリジン ポリシーの原則に従うことが重要であることに注意してください。リソース。

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