為什麼除非使用 JSONP，否則 AJAX 無法載入跨網域 HTML，如何解決？

使用AJAX 載入跨域端點

問題：

您在使用以下方式載入跨域HTML 網頁時遇到困難AJAX，除非資料類型設定為“jsonp”。即使使用 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中文網其他相關文章！