移动设备上的 Ionic 4 CORS 问题

Question

我有一个 Ionic 4 项目，我需要在其中发布并调用服务器。该服务器是一个 Spring Java 服务器，它只允许来自http://localhost:4200 的调用并在http://localhost:8080上运行自己。我只有服务器的 DNS 地址。问题是当我为移动设备部署应用程序时，它会启动一个本地服务器，其中 CORS 由WebView强制执行。

我收到此错误：
对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问Origin ' http://localhost:4200 '。

对于我使用HttpClient来自 Angular的 Rest Call ，我已经读到 Ionic-Native/HTTP 处理 CORS 问题，但我需要重写我的所有调用，而且我无法在浏览器上测试它，这需要相当长的时间发展的时间。是否可以使用代理来处理此问题，该代理告诉服务器我的来源是“ http://localhost:4200 ”，或者在 Spring 上允许来自特定端口的任何 IP 地址？我还看到有一个名为ionic-native-http-connection-backend 的库，它在可能的情况下使用来自 ionic 的本机 http，但它不起作用。

我希望有一种方法可以使用HttpClientfrom Angular 并以某种方式解决此问题，或者是否必须在后端进行更改以使它们最小化。

感谢您抽出宝贵时间帮助我。

---

这是我的 CLI 和项目版本：

   ionic (Ionic CLI)             : 4.2.1 (C:\Users\John\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.12
   @angular-devkit/build-angular : 0.7.5
   @angular-devkit/schematics    : 0.7.5
   @angular/cli                  : 6.1.5
   @ionic/angular-toolkit        : 1.0.0

科尔多瓦：

   cordova (Cordova CLI) : 8.1.1 (cordova-lib@8.1.0)
   Cordova Platforms     : android 7.1.1
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.0, (and 7 other plugins)

系统：

   NodeJS : v8.11.4 (C:\Program Files\nodejs\node.exe)
   npm    : 5.6.0
   OS     : Windows 8.1

---

Answer 1

在作者发布 ionic 4 的完整版本之前，您可以通过以下方式获得 ionic-native-http-connection-backend 的好处：

将ionic-native-http-connection-backend/src文件夹的内容复制到项目 app/ 文件夹下的某个位置。即： app/ionic-native-http-connection-backend 并直接使用它。您所要做的就是将其导入到您的应用程序模块中（如果您在 app.module.ts 中有它，请删除 HttpClientModule）。您无需更改任何其他内容。

示例 app.module.ts：

import { HttpBackend, HttpXhrBackend } from '@angular/common/http';
import { NativeHttpModule, NativeHttpBackend, NativeHttpFallback } from 'ionic-native-http-connection-backend';
import { Platform } from 'ionic-angular';

@NgModule({
    declarations: [],
    imports: [
        NativeHttpModule
    ],
    bootstrap: [],
    entryComponents: [],
    providers: [
        {provide: HttpBackend, useClass: NativeHttpFallback, deps: [Platform, NativeHttpBackend, HttpXhrBackend]},
    ],
})

额外提示：如果您需要在测试期间绕过 ssl 检查，请在 ionic-native-http-connection-backend: 中编辑 native-http-backend.ts 并插入： nativeHttp.setSSLCertMode('nocheck');

就我而言，我在第 141 行之后插入了 ssl 'nocheck'：

本机-http-backend.ts：

this.nativeHttp.setDataSerializer(
    this.detectDataSerializerType(req),
);
this.nativeHttp.setSSLCertMode('nocheck'); // REMOVE FOR PRODUCTION
this.nativeHttp[requestMethod](url, body, { ...headers })
    .then((response: HTTPResponse) => {
        fireResponse({