Ionic 4 Angular 7 简单远程 HTTP 请求 CORS答案

【问题标题】：Ionic 4 Angular 7 Simple Remote HTTP Request CORSIonic 4 Angular 7 简单远程 HTTP 请求 CORS
【发布时间】：2019-04-04 11:41:59
【问题描述】：

我对 ionic 和 Angular 有点陌生，我正在尝试弄清楚如何在绕过 CORS 的同时向远程服务器发送一个简单的 HTTP 请求。我最初的解决方案是这样做：

this.httpClient.get<MyObj>("/api");

然后我用这个内容创建了一个proxy.config.json：

{
  "/api": {
    "target": "http://real-remote-host/",
    "changeOrigin": true,
    "secure": false,
    "pathRewrite": {
      "^/api": ""
    }
  }
}

当我在做ng serve 时，这很有效。但是，我使用 ionic cordova build android 构建了一个 android APK，然后这段代码不再有效。似乎代理仅在通过serve 命令运行时才有效，而不是通过build 命令运行。我肯定会遗漏一些东西，因为一个简单的 HTTP 请求不可能这么难。

另外，远程主机不能更改，所以请不要建议更改为允许远程主机的CORS。

【问题讨论】：

没错，代理是 webpack 开发服务器的一部分（参见 the docs），而不是生产构建输出的一部分。
好的，所以我可以放弃 proxy.config.json 解决方案，因为它不适用于生产构建。有其他选择吗？

标签： angular cors ionic4

【解决方案1】：

我能够找到一个解决方案来让它在 Android 上运行。它基于 Ionic 提供的本教程：https://ionicframework.com/docs/native/http。但是，他们的文章远未完成。

本教程缺少的最重要的一点是，您需要将 HTTP 作为提供程序包含在您的 Angular 应用模块中。

import { HTTP } from "@ionic-native/http/ngx";
...
@NgModule(
...
   providers: [
      ...
      HTTP
      ...
   ]
...
)
...

我遇到的第二个问题是它一直说“plugin_not_installed”。这是因为我碰巧在它准备好使用之前调用了this.http.get()。为了解决这个问题，我需要：

...
this.platform.ready().then(() => {
     this.http.get(...);
});
...

因为我使用的 REST 服务是 HTTP 而不是 HTTPS，并且因为我的目标是 SDK 28+，所以我需要在我的 config.xml 中包含这个 sn-p。主要是需要在AndroidManifest.xml文件中将usesCleartextTraffic设置为true。

...
<platform name="android">
...
    <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">
        <application android:usesCleartextTraffic="true" />
    </edit-config>
...
</platform>
...

另请注意，此解决方案不适用于浏览器，因此您必须使用前面提到的 proxy.config.json 解决方案进行测试。您可以使用this.platform.is("android") 来检查它是否是android。我无法验证这是否可以在 ios 上正常工作，但插件页面说它支持 android 和 ios。

【讨论】：