javascript - 如何使用 Angular4 将网站下载为字符串?

标签 javascript angular cors same-origin-policy

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

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

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

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

并且可观察对象和 promise 失败,因为我收到 CORS 错误。而且我不确定为什么我会收到 CORS 错误,因为它不是 RESTful 服务、WCF 或 Web API 等。

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

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

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

最佳答案

您可以使用 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)
<pre></pre>

那里发生的事情是这样的:

如果站点本身不发送 Access-Control-Allow-Origin 响应 header ,那么浏览器将阻止您的前端 JavaScript 代码访问来自该站点的响应。使用来自 JavaScript 库的 Fetch API 或 XHR 或 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 header 添加到响应并将其传递回您的请求前端代码。

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

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

有关当您使用 XHR 或 Fetch API 或来自 JavaScript 库的 AJAX 方法从前端 JavaScript 代码发送跨域请求时浏览器会做什么的详细信息,以及有关必须接收哪些响应 header 以使浏览器允许前端代码的详细信息访问响应——参见 https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS .

关于javascript - 如何使用 Angular4 将网站下载为字符串?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45662169/

相关文章:

javascript - Angular 4 和 token

node.js - Angular 应用程序运行本地 API 实例时出现 "blocked by CORS policy"错误

typescript - 使用 Aurelia 的 Fetch Client 时 Azure Translator API(认知服务)上出现 CORS 错误

javascript - 当内容到达div底部时如何将div中的内容打包以向右移动

javascript - Windows 上的 NodeJS 0.6.10 中的 Bogart 无法启动,并显示有关 'sys' 模块的消息

javascript - 解析html资源时如何使apache区分大小写

javascript - 获取推送后创建的对象的 key (Angular 和 Firebase)

javascript - Ext.Ajax.request在jQuery.ajax发送GET时发送OPTIONS请求跨域

css - 如何在Angular2种子元素中实现SCSS?

javascript - 如何使用 XMLHttpRequest 对象将 Access-Control-Allow-Origin 设置为 "*"?