Проблема Ionic 4 CORS на мобильном устройстве - PullRequest
Новая
       11

Проблема Ionic 4 CORS на мобильном устройстве

0 голосов
/ 14 октября 2018

У меня есть проект Ionic 4, где мне нужно делать посты и получать звонки на сервер.Сервер - это пружинный Java-сервер, который разрешает звонки только с http://localhost:4200 и работает на http://localhost:8080. У меня есть только DNS-адрес Сервера.Проблема заключается в том, что когда я развертываю приложение для мобильного устройства, оно запускает сервер локального хоста, где CORS применяется WebView .

Я получаю эту ошибку:
Ответ на запрос предварительной проверки не проходит проверку контроля доступа: в запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin».Происхождение 'http://localhost:4200' поэтому не разрешено.

Для вызова покойного я использую HttpClient от Angular, я уже читал, что Ionic-Native / HTTP обрабатывает проблемы CORS, но мне нужно будет переписать все мои вызовы, и я могу 'Протестируйте его в браузере, на разработку которого уйдет довольно много времени.Можно ли решить эту проблему с помощью прокси-сервера, который сообщает серверу, что я являюсь источником "http://localhost:4200", или разрешить в Spring разрешить любые IP-адреса из определенного порта? Я также видел, что есть библиотеканазывается ionic-native-http-connection-backend , который использует собственный http из ionic, когда это возможно, но он не работает.

Я надеюсь, что есть способ, которым я могу использоватьHttpClient от Angular и как-то обойти эту проблему или если изменения в бэкэнде ДОЛЖНЫ быть сделаны, чтобы они были минимальными.

Спасибо, что нашли время помочь мне.


Это мой 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

1 Ответ

0 голосов
/ 19 октября 2018

Вот как вы можете воспользоваться преимуществом ionic-native-http-connection-backend, пока авторы не получат полную версию для ionic 4:

Скопируйте содержимое ionic-native-http-connection-backend / src папка, расположенная в папке / папке вашего проекта.то есть: app / ionic-native-http-connection-backend и использовать его напрямую.Все, что вам нужно сделать, это импортировать его в модуль приложения (удалите HttpClientModule, если он есть в app.module.ts).Вам не нужно ничего менять.

Пример 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 во время тестирования, отредактируйте native-http-backend.ts внутри ionic-native-http-connection-backend: и вставьте: nativeHttp.setSSLCertMode ('nocheck');

В моемcase я вставил ssl 'nocheck' после строки # 141:

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