如何使用 Angular4 将网站下载为字符串？答案

【问题标题】：How can I download a website as string with Angular4?如何使用 Angular4 将网站下载为字符串？
【发布时间】：2018-01-21 13:31:10
【问题描述】：

我正在尝试下载（获取）返回字符串而不是 XML 和 JSON 的网页。

基本上有什么方法可以像 C# 中的 WebClient.DownloadString 一样在 Angular4 中将网页作为字符串下载？

注意： 我以为我可以使用 http 方法（observables、promises、JSONP）来下载一个网站。但无论如何我都试过了。

据我所知，我无法使用 JSONP，因为它将结果解析为 json，我收到错误，因为响应是字符串而不是 JSON。

并且 observables 和 promises 失败，因为我得到了 CORS 错误。而且我不确定为什么会收到 CORS 错误，因为它不是 RESTful 服务、WCF 或 Web api 等。

请求的资源上不存在“Access-Control-Allow-Origin”标头。

我也尝试过 HttpClient，但我又遇到了 CORS 错误。

所以我相信 Angular 中应该有一些其他的方法、组件或模块可以将网页作为字符串下载。

【问题讨论】：

那么为什么有角度标签呢？这是关于浏览器CORS的。如果任何站点具有不同的域，如果它没有 CORS 标头，则它不能被 reuest 访问。
因为我正试图找到一种使用 Angular 下载网站的方法。这不是 RESTful 服务或 WCF 或 API，它只是一个网页。所以我不确定为什么我也会收到 CORS 错误。因此，使用 http 服务时，我无法下载网站。但我相信 Angular 中应该有一些我可以使用但找不到的东西。另一方面，我可以使用 C# 或任何其他语言下载网站，而不会出现 CORS 错误。所以问题是； Angular中是否有类似WebClient方法的东西可以将网页下载为字符串。
您在发出 GET 请求吗？是Simple request 描述的here
感谢您，但您发送的链接与 RESTful 调用有关。我实际上是在尝试找到一种下载网站的方法，所以我认为 http get requests（observables、promises 和 JSONP）不是下载网页的正确方法，因为它们只是 RESTful 服务方法。所以我认为应该有其他方式（方法、组件、技术、其他）在 Angular 中下载网站。
原始XMLHttpRequest

标签： javascript angular cors same-origin-policy

【解决方案1】：

您可以使用 CORS 代理来获取不发送 Access-Control-Allow-Origin 的网站的内容，这是一个简单的示例：

const proxyurl = "https://cors-anywhere.herokuapp.com/";
const requesturl = "https://google.com";
fetch(proxyurl + requesturl)
    .then(response => response.text())
    .then(text => document.querySelector("pre").textContent = text)

&lt;pre&gt;&lt;/pre&gt;

发生了什么是这样的：

如果网站本身不发送 Access-Control-Allow-Origin 响应标头，那么当您使用 Fetch API 或 XHR 向该网站发出请求时，浏览器将阻止您的前端 JavaScript 代码访问该网站的响应，或者JavaScript 库中的 Ajax 方法。

但是使用 URL https://cors-anywhere.herokuapp.com/https://google.com 会导致通过 https://cors-anywhere.herokuapp.com 发出请求，这是一个开放的 CORS 代理，它将请求转发到 https://google.com，然后从它接收响应。 https://cors-anywhere.herokuapp.com 后端将 Access-Control-Allow-Origin 标头添加到响应中，并将其传递回您的请求前端代码。

然后浏览器将允许您的前端代码访问响应，因为带有Access-Control-Allow-Origin 响应标头的响应是浏览器看到的。

您还可以使用 https://github.com/Rob--W/cors-anywhere/ 轻松设置自己的 CORS 代理

详细了解当您使用 XHR 或 JavaScript 库中的 Fetch API 或 AJAX 方法从前端 JavaScript 代码发送跨域请求时浏览器会做什么，以及有关必须接收哪些响应标头才能让浏览器允许前端代码的详细信息访问回复——请参阅https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS。

【讨论】：

【解决方案2】：

很抱歉，Same Origin Policy 阻止您的网站从其他域下载网站。同源策略适用于每个 Web 请求。无论是网站还是 REST API 都没有区别。

围绕同源策略有多种方法：

目标网络服务器可以通过设置CORS-header Access-Control-Allow-Origin 进行合作。（CORS 已知 cmets 中提到的“简单请求”的概念，但这不相关。“简单请求”是不触发预请求的请求。但跳过预请求不允许您访问对于响应，您仍然需要 Access-Control-Allow-Origin 响应头）。
您可以将您的网站转换为可安装的应用程序或浏览器扩展程序
您可以在您的域上提供一个服务器端脚本，将请求代理到目标域。请谨慎使用此选项，因为它可能很容易被第三方滥用，除非您采取额外措施（例如，将目的地列入白名单、速率限制和日志记录）。

【讨论】：