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

Question

我对 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。

Answer 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 中包含这个片段。最主要的是 usesCleartextTraffic 需要在 AndroidManifest.xml 文件中设置为 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。

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

Ionic 4 Angular 7 Simple Remote HTTP Request CORS

cors

angular

ionic4