移动设备上的Ionic 4 CORS问题

时间:2018-10-14 10:25:31

标签: http ionic-framework mobile cors

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

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

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

我希望有一种方法可以使用Angular的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


1 个答案:

答案 0 :(得分:3)

在作者全面发布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':

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