为什么除非使用 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中文网其他相关文章！