移动设备上的 Ionic 4 CORS 问题

Question

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

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

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

我希望有办法使用 Angular 的HttpClient并以某种方式解决此问题，或者如果必须对后端进行更改，使它们最小。

谢谢你花时间帮助我。

---

这是我的 CLI 和项目版本：

ionic (Ionic CLI)             : 4.2.1 (C:UsersJohnAppDataRoamingnpmnode_modulesionic)
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 Filesnodejsnode.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-后端并直接使用它。您所要做的就是将其导入到您的应用程序模块中(如果您在app.module.ts中有它，请删除HttpClientModule(。您不必更改任何其他内容。

示例应用程序模块：

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'：

native-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({