移动设备上的Ionic 4跨域资源共享问题

Question

移动设备上的Ionic 4跨域资源共享问题

4

我有一个Ionic 4项目，需要向服务器进行post和get调用。服务器是一个Spring Java服务器，只允许来自http://localhost:4200的调用，并在http://localhost:8080上运行。我只有服务器的DNS地址。问题在于当我将应用部署到移动设备时，它会启动一个本地主机服务器，在这个服务器上，WebView强制执行跨域资源共享（CORS）。

我遇到了以下错误： Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

为了进行Rest Call，我使用了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 (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

- Chris Mathew

如果没有本地的http插件，您将无法在应用程序中调用API，但是您可以使用条件代码，在浏览器上使用HTTPClient调用，在移动应用程序上使用本地http调用，从而可以在两种情况下使用您的API。希望您能理解我的意思。 - CodeChanger

谢谢您的回复，看起来这里没有真正的解决方法。您知道我是否可以在Ionic Native HTTP中使用Angular HttpClient选项作为标头吗？ - Chris Mathew

你是如何解决这个问题的？ - HexaCrop

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Groovy QA · Accepted Answer

以下是如何在ionic 4中使用ionic-native-http-connection-backend插件的步骤：

1. 打开ionic-native-http-connection-backend/src文件夹，将其内容复制到项目app/文件夹下的任意位置（例如：app/ionic-native-http-connection-backend）。

2. 在你的应用程序模块中导入它即可（如果已经在app.module.ts中导入了HttpClientModule，请将其删除）。无需更改其他任何内容。

3. 参考下面示例的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({