移动设备上的 Ionic 4 CORS 问题

Posted

技术标签:

【中文标题】移动设备上的 Ionic 4 CORS 问题【英文标题】:Ionic 4 CORS issue on mobile device 【发布时间】:2019-03-18 23:51:43 【问题描述】:

我有一个 Ionic 4 项目,我需要在其中发帖并调用服务器。该服务器是一个 Spring Java 服务器,只允许来自 http://localhost:4200 的调用并在 http://localhost:8080 上运行。我只有服务器的 DNS 地址。问题是当我为移动设备部署应用程序时,它启动了一个本地主机服务器,其中 CORS 由 WebView 强制执行。 我得到这个错误: 对预检请求的响应未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin”标头。因此,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


【问题讨论】:

如果没有本机 http 插件,您将无法在您的应用程序中调用 api,但您可以执行条件代码以在浏览器上使用您的 HTTPClient 调用并在移动应用程序上使用本机 http 调用,这样您就可以工作了两种情况下的 api。希望你能明白我的意思。 感谢您的回复,这里似乎没有真正的解决方法。你知道我是否可以使用 ionic native http 中的 angulat httpclient 选项作为标头吗? 你是如何解决这个问题的? 【参考方案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':

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(

【讨论】:

非常感谢!这正是我所希望的解决方案。对于由于 CORS 问题而不想重写 HttpClient-Requests 的每个人,请尝试一下。 不客气!太多令人困惑和相互矛盾的信息超载了关于这个...... 你为什么不直接安装库? npm install --save ionic-native-http-connection-backend@next。哟将需要修改 native-http-backend.ts 以在每个克隆项目中为您的测试购买您将保持库更新。 我实现了这个,但是遇到了更多的问题,你能帮我如何集成这个吗?这也适用于浏览器? 如何在我的服务 ts 文件中使用它?

以上是关于移动设备上的 Ionic 4 CORS 问题的主要内容,如果未能解决你的问题,请参考以下文章

本地主机和设备上的 Ionic 的 CORS 问题[关闭]

移动应用程序避免或保护 CORS?

将服务器移动到 CORS 位置时,Passport/Express 会话身份验证中断

移动 Chrome 上的 CORS Allow-Access-Control-Origin

设USB 可移动存储设备设为只读的方法

Javascript(Ionic)中两个移动设备之间的距离