如何使用jQueryAJAX加载跨域html页面

Question

如何使用jQuery AJAX加载跨域HTML页面？

假设我想使用jQueryAJAX获取域外的页面：

$.get('http://www.domain.com/mypage.html', function(data) {
  alert(data);
});

我可能会收到以下错误消息：

XMLHttpRequest无法加载http://www.domain.com/path/filename.起源Access Control Allow Origin不允许null。

由于同源策略，我们无法使用AJAX加载跨域页面。

我可以尝试使用"jsonp"来绕过这个限制：

$.ajax({
  type:     "GET",
  url:      url,
  dataType: "jsonp",
  success: function(data){
    console.log(data);
  }
});

但是如果这个站点不支持"jsonp"怎么办？这可能是个问题。

如果我只想阅读一个外部页面并解析它的HTML，该怎么办？

Answer 1

我知道这是一篇旧帖子。但是，我希望这将帮助其他正在寻找同样东西的人

你根本做不到-同源策略，或者您需要为www.domain.com 设置CORS头

但是，如果你只想将外部页面内容提取到你的页面，有一个变通方法你可以做：

在服务器中创建一个端点，以返回给定外部URL的HTML内容（因为您无法将外部内容获取到浏览器-同源策略）

JS:

var encodedUrl = encodeURIComponent('http://www.domain.com/mypage.html');
$.get('http://www.yourdomain.com/getcontent?url=' + encodedUrl, function(data) {
    console.log(data);
});

在.NET中从URL读取字符串的最简单方法-可以使用此方法创建/getcontent端点

Answer 2

您可以使用"AJAX Cross Origin"一个jQuery插件来加载跨域HTML页面。AJAX Cross Origin是一个jQuery插件，用于允许跨Origin AJAX请求。有了这个插件，我们可以很容易地绕过同源策略，进行跨域请求。

使用起来非常简单：

   $.ajax({
        crossOrigin: true,
        url: url,
        success: function(data) {
            console.log(data);
        }
    });

您可以在此处阅读更多信息：http://www.ajax-cross-origin.com/