使用 Angular JS 抓取网站以获取基本数据（Facebook 之类的链接共享模块）

Posted 2023-03-04

【中文标题】使用 Angular JS 抓取网站以获取基本数据（Facebook 之类的链接共享模块）

【英文标题】：Scrape website for basic data using Angular JS ( facebook like Link sharing module)

【发布时间】：2015-12-03 02:08:09

【问题描述】：

我正在尝试让 Facebook 像“链接共享”模块一样，即当有人在做新的 POST 时写一个链接时，它会自动显示来自网站的一些基本数据，比如在 facebook...

我尝试使用 $http.get 进行简单的 scraping 并且只有在我在 google chroome 中安装 CORS 扩展程序时它才能工作，所以我使用这种方法面临的主要问题是在不使用任何工具的情况下工作插件...

我也尝试在配置文件中添加标题，但仍然没有成功。

$httpProvider.defaults.headers.common = ;
$httpProvider.defaults.headers.post = ;
$httpProvider.defaults.headers.put = ;
$httpProvider.defaults.headers.patch = ;
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];

请与我分享执行此功能的最佳方法，或者是否有任何方法可以解决 CORS 问题？

谢谢 泽山

【参考方案1】：

有一种解决方法可以让浏览器只运行 javascript 解决方案，而无需在服务器中配置任何东西（在某些特定情况下可能有用）并“避免”CORS。

您可以使用YQL。这样，您只需在他们的console 中使用您需要 抓取 的 url 并使用他们在您的网站中为您提供的查询作为您请求的 url。

例如（摘自YQL网站）：

select * from html where url='http://finance.yahoo.com/q?s=yhoo' and xpath='//div[@id="yfi_headlines"]/div[2]/ul/li/a'

从 yahoo Finance 获取头条新闻，您还可以获得可在请求中使用的查询 url：

https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D'http%3A%2F%2Ffinance.yahoo.com%2Fq%3Fs%3Dyhoo'%20and%20xpath%3D'%2F%2Fdiv%5B%40id%3D%22yfi_headlines%22%5D%2Fdiv%5B2%5D%2Ful%2Fli%2Fa'&format=json&diagnostics=true&callback=

他们有其他示例以及如何将其集成到他们的文档中。

您不需要在服务器端配置任何东西，但当然，它必须通过雅虎，这根本不是最佳的。当然，性能会受到直接影响...

再次说过，也许在某些特定情况下（开发、测试等），这可能很有用，尝试一下总是很有趣。

【参考方案2】：

这是不可能的。 CORS 的存在是有原因的：阻止您在其他域未明确允许您访问的情况下从其他域访问 HTTP 资源。

再次重申：这是不可能的，因为浏览器施加了安全限制。

实现此目的的唯一方法以及 Facebook 的做法是将这些跨域请求移至没有跨域限制的服务器。

所以$http.post('/some-script-on-my-server')，该脚本对远程页面执行实际的 HTTP 请求，抓取必要的信息并将其返回给浏览器。

【讨论】：

感谢@Sergiu Paraschiv 的回答。我只是想知道谷歌扩展“CORS”是如何使用相同的角度代码实现的？

因为该扩展禁用 CORS 安全限制。您可能无法要求应用程序的用户安装它，而且他们中的大多数甚至都不使用 Chrome。