JSONP を使用しないと AJAX がクロスドメイン HTML のロードに失敗するのはなぜですか? これはどのように解決できますか?

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

問題:

を使用してクロスドメイン HTML ページを読み込むときに問題が発生しました。 dataType が「jsonp」に設定されていない場合は AJAX。 JSONP を使用している場合でも、ブラウザーはスクリプト MIME タイプを予期しますが、代わりに「text/html」を受け取ります。

解決策 1: サードパーティ プロキシを利用する

セキュリティ上の理由ユーザーデータを追跡するサードパーティのプロキシには懸念があるため、個人情報を使用することはお勧めできません。ただし、パブリック データのシナリオには適している可能性があります。

次のプロキシ オプションを検討してください:

• CORS Anywhere: プロキシされたデータに CORS ヘッダーを自動的に追加します。リクエスト。

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

• オリジンは何でも: クロスドメイン JSONP アクセスを容易にします。

$.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 プロキシ: あらゆる CORS リクエストを簡素化します。

$.get(
  'http://www.corsproxy.com/' +
  'en.wikipedia.org/wiki/Cross-origin_resource_sharing',
  function (response) {
    console.log("> ", response);
    $("#viewer").html(response);
  }
);

解決策 2: バックエンド プロキシを確立する

最も安全なアプローチは、バックエンドにプロキシを作成し、クロスドメインの問題

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