Ionic/Angular: 从另一个网站读取任何 HTML 页面

Question

在 Android 中，我可以使用 OkHttp 阅读任何 Html 页面并扫描其中的项目。这可以通过

完成吗

我想将 Android 应用程序转换为 Ionic。

似乎使用 HttpClient 对 HTML 页面的任何读取都会导致 CORS 或 CORB。

那么，我无法阅读 Ionic 中的任何 HTML 页面？

Answer 1

The same-origin policy generally prevents one origin from reading arbitrary network resources from another origin. In practice, enforcing this policy is not as simple as blocking all cross-origin loads: exceptions must be established for web features, like or which can target cross-origin resources for historical reasons, and for the CORS mechanism which allows some resources to be selectively read across origins.

Certain types of content, however, can be shown to be incompatible with all of the historically-allowed permissive contexts. JSON is one such type: a JSON response will result in a decode error when targeted by the tag, either a no-op or syntax error when targeted by the tag, and so on. The only case where a web page can load JSON with observable consequences, is via fetch() or XMLHttpRequest; and in those cases, cross-origin reads are moderated by CORS.

By detecting and blocking loads of CORB-protected resources early -- that is, before the response makes it to the image decoder or JavaScript parser stage -- CORB defends against side channel vulnerabilities that may be present in the stages which are skipped.

https://chromium.googlesource.com/chromium/src/+/master/services/network/cross_origin_read_blocking_explainer.md

出于安全原因，您的请求甚至无法阅读。您可以从 server-side 为 API 建立一个 session 并从那里发送请求。您需要确保每个 header 都是正确的。这样您的服务器将充当代理，但如果目标 API 不需要您的请求，您应该避免这样做。如果执行您对 API 的请求没有任何危害，并且您作为附带损害被阻止，那么您可以使用您的服务器作为代理。

Answer 2

有关 Ionic 和 CORS 的信息，请阅读这篇非常好的文章 article。它准确地解释了使用 'ionic serve' 和 'ionic run -l' 进行测试将触发 CORS。运行在设备上不会触发 CORS 检查。真的吗？

当我尝试在我的设备上的 Ionic Android 应用程序中执行 (!) 以访问其他站点的 html 文件时，它仍然无法正常工作。嗯。

如何解决？可以使用代理服务器来解决。首先，我尝试了下一个解决方案......并且它有效 - 即使对于本地测试！

https://cors-proxy.htmldriven.com/?url=http://www.example.com/page1

下一个问题是……我可以自己创建一个非常简单的代理服务器吗？是的，使用 Spring Boot 非常简单。只需创建一个使用简单 OkHttp get 调用的控制器。这甚至在使用 'ionic serve' 进行测试时也有效！当我以正确的方式在服务器上配置 Cors 时，这会起作用。

离子代码呢？这对我有用 (Ionic3/Angular5/HttpClient)：

this.httpClient.get( url, { observe: 'body', responseType: 'text'}).subscribe(
    data => {
        console.log( 'Output is data = ' + data);
    },
    err => {
        console.log( 'ERROR: ' + err.toLocaleString());
    });
}

是的，您需要一个自己的网站来促进这一点——这是缺点。它还需要额外的互联网 'stop' 才能让你远程 HTML 东西。

Ionic/Angular: 从另一个网站读取任何 HTML 页面

Ionic/Angular: reading any HTML page from another website

ionic3

angular-httpclient