Http 移动设备上的Ionic 4 CORS问题

我有一个爱奥尼亚4项目，在那里我需要向服务器发送邮件并获取呼叫。该服务器是一个SpringJava服务器，它只允许从其上进行调用并在其上运行。我只有服务器的DNS地址。问题是，当我为移动设备部署应用程序时，它会启动一个本地主机服务器，其中CORS由服务器强制执行。

我得到这个错误：
对飞行前请求的响应未通过访问控制检查：请求的资源上不存在“访问控制允许来源”标头。因此，不允许访问源“”。

对于Rest调用，我使用Angular的

HttpClient

，我已经了解到Ionic Native/HTTP处理CORS问题，但是我需要重写所有调用，并且无法在浏览器上测试，这需要花费相当长的时间来开发。是否可以使用一个代理来处理这个问题，该代理告诉服务器我的源代码是“”，或者在Spring上允许来自特定端口的任何IP地址？我还看到有一个名为的库，它在可能的情况下使用来自ionic的本机http，但它不起作用

我希望有办法从角度使用

HttpClient

，以某种方式解决这个问题，或者如果必须对后端进行更改，那么这些更改是最小的

谢谢你花时间帮助我。

---

这是我的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

---

---

以下是在作者发布了ionic 4的完整版本之前，您如何获得ionic本机http连接后端的好处：

将文件夹的内容复制到项目的应用程序/文件夹下的某个位置。i、 e:应用程序/离子本机http连接后端，直接使用。您所要做的就是将其导入到您的应用程序模块中（如果在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]},
    ],
})

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

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

在我的例子中，我在第141行之后插入了ssl“nocheck”：

本机http后端。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]},
    ],
})

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

---

如果没有本机http插件，您将无法在应用程序中调用api，但您可以执行条件代码，在浏览器上使用您的HTTPClient调用，在移动应用程序上使用本机http调用。这样，您就可以在这两种情况下使用您的api。希望你能理解我的观点。谢谢你的回复，这里似乎没有真正的解决办法。您知道我是否可以使用ionic native http中的angulat httpclient选项作为标头吗？您是如何解决此问题的？非常感谢！这正是我所希望的解决办法。对于由于CORS问题而不想重写HttpClient请求的所有人，请尝试一下。不客气！关于这一点，有这么多混乱和冲突的信息……为什么不直接安装这个库呢<代码>npm安装--保存本机http连接-backend@next。Yo将需要修改native-http-backend.ts，以便在每个克隆项目中进行测试。您将保持库的更新。我实现了此功能，但遇到更多问题，您能否帮助我如何集成此功能？这也适用于浏览器？如何在我的服务ts文件中使用它？