0

如何对链接的跨域HTML 页面执行 ajax 调用并获取此链接页面的元标记的内容？

目标是从任何可能的 URL/网站获取例如 OpenGraph-Image 的 URL——正如 Facebook 或 Google+ 所做的那样。我提供 URL ( decURL)，然后脚本应该从这个远程 url/页面的元数据中获取 og:image-URL。

以下代码仅适用于相同的域/本地 - 但我需要它跨域工作，因此我可以输入任何 URL，脚本将为我获取 og:image...</p> 

    $.get(decURL, function(data){
      var $ogImage = $(data).filter("meta[property='og:image']").attr('content');

      $imgPlaceholder.prepend($articleImage.attr('src',$ogImage));
      $imgField.val($ogImage);
    });
4

1 回答 1

2

出于安全原因，大多数浏览器有意限制此类功能（阅读Same Origin Policy，它旨在限制的一些攻击类型 - XSS和CSRF - 以及绕过它的方法，包括CORS ，如果你有控制两个服务器环境）。

由于您不属于可以按书本做事的类别，因此通过实施 CORS 等，您必须走很长的路。本质上，为了能够抓取任何站点的元数据，您需要从服务器进行抓取。

在这种情况下，服务器实际上是一个客户端，因此不会受到这些策略的限制（这听起来令人困惑，但基本上服务器以与浏览器客户端完全相同的方式向另一台服务器请求页面）。

根据您要执行的操作，您可能希望将其作为代理或单独的应用程序。

作为一个独立的应用程序，您将编写一个简单的脚本，该脚本在某处的服务器上运行并为您进行扫描，将结果放在您自己的环境中的数据库中，您的浏览器可以访问（这或多或少是 Facebook 的方式） ）。

作为代理，您将编写一个类似的脚本，但不是由诸如 cron 作业或基于时间的触发器之类的东西触发，并将结果保存在数据库中，而是由您的前端的请求触发，去吧抓取另一个页面，扫描元数据，然后将其返回到您的浏览器客户端。

这样做的主要缺点是每次请求某些东西时都会在服务器上增加额外的负载，这意味着您需要小心不要使托管环境过载。这大概就是FB等走“服务器应用程序”路线的原因。

这听起来很痛苦，但实际上组装起来非常简单，如果您想要扫描任何东西，而不仅仅是您制作的东西或可以要求人们配置的东西，那么真的没有其他选择。

于 2013-06-20T09:43:01.773 回答