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

Posted 2023-03-06

【中文标题】如何使用 jQuery AJAX 加载跨域 html 页面？

【英文标题】：How can I load cross domain html page with jQuery AJAX?

【发布时间】：2014-10-31 16:06:12

【问题描述】：

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

假设我想使用 jQuery AJAX 在我的域之外获取一个页面：

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

我可能会收到此错误消息：

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

由于Same-origin policy，我们无法使用 AJAX 加载跨域页面。

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

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

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

如果我只想读取外部页面并解析其 HTML 怎么办？

【问题讨论】：

您是否可以控制“外部”域？我问是因为如果是这样，请查看 CORS en.wikipedia.org/wiki/Cross-origin_resource_sharing

相关：***.com/a/17299796/612253

【参考方案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);
);

Easiest way to read from a URL into a string in .NET - 可以使用它来创建/getcontent 端点

【参考方案2】：

您可以使用 'AJAX Cross Origin' 一个 jQuery 插件来加载跨域 HTML 页面。 AJAX Cross Origin 是一个允许跨域 AJAX 请求的 jQuery 插件。 有了这个插件，我们可以轻松绕过Same-origin policy，进行跨域请求。

使用非常简单：

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

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