在 Angular 4 中使用 http.get 获取数据后从网页中抓取数据答案

【问题标题】：Scrape data from web page after getting it with http.get in Angular 4在 Angular 4 中使用 http.get 获取数据后从网页中抓取数据
【发布时间】：2017-11-18 11:09:09
【问题描述】：

我正在尝试获取包含以下代码的网页，以便我可以抓取其数据，但我不断收到错误消息：XMLHttpRequest 无法加载 https://websiteURL.com。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'http://localhost:4200' 不允许访问。我已经读到我需要在标题中设置“Access-Control-Allow-Origin”名称，我尝试使用通配符“*”以及我的本地主机，但没有任何效果。

这是我的打字稿代码：

import { Component, OnInit } from '@angular/core';
import { Http, Response, RequestOptionsArgs, Headers } from '@angular/http';

....

constructor(private http: Http) { }

....

doScrape() {
    var header : Headers = new Headers();
    header.append('Access-Control-Allow-Origin', 'http://localhost:4200');
    var args : RequestOptionsArgs = {
      method: "GET",
      headers: header
    }

    console.log('Getting html...');
    this.http.get(this.b, args).subscribe(res => {
      console.log(res);
      this.htmlString = res.text();
    })
}

为什么这不能完成工作？

【问题讨论】：

该标头应该来自后端。在 UI 代码（角度）中设置它没有效果。

标签： angular http-get

【解决方案1】：

Access-Control-Allow-Origin 是响应头，而不是请求头。详情见这个答案：https://stackoverflow.com/a/10636765/1759462

我发现这篇博文很有帮助：https://medium.freecodecamp.org/client-side-web-scraping-with-javascript-using-jquery-and-regex-5b57a271cb86

坏消息是，您需要在服务器端运行此类请求才能解决此问题。

[...]

好消息是，感谢许多其他遇到相同问题的优秀开发人员，您不必自己接触后端。

牢牢地保留在我们的前端脚本中，我们可以使用跨域工具，例如Any Origin、Whatever Origin、All Origins、crossorigin，可能还有更多。我发现您经常需要测试其中的一些，才能找到适用于您要抓取的网站的那个。

某些链接已失效或未维护，因此请勿将它们用于生产目的。也许在您自己的服务器上运行它。目前，All Origins 似乎是一个不错的选择。

【讨论】：