Блог

Я пытался настроить этот прокси-сервер Ionic CLI, следуя этому руководству, но это с 2015 года, и я понятия не имею, как это реализовать в Angular 10.

Поэтому, когда я запускаю свое приложение с помощью команды:

 ionic capacitor run android --project=myApp -c=production
  

У меня эта ошибка в Android Studio:

 E/Capacitor/Console: File: http://localhost/login - Line 0 - Msg: Access to XMLHttpRequest at 'https://remoteServer.com/api/v1/oauth/v2/token' from origin 'http://localhost' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' head
  

Это мой файл capacitor.config.json:

 {
  "appId": "io.ionic.starter",
  "appName": "myApp",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "www",
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 0
    }
  },
  "cordova": {},
  "linuxAndroidStudioPath": "/opt/android-studio/bin/studio.sh"
}
  

И это мой файл ionic.config.json:

 {
  "name": "myApp",
  "integrations": {
    "capacitor": {}
  },
  "type": "angular",
  "proxies": [
    {
      "path": "/api",
      "proxyUrl": "https://remoteServer.com/api"
    }
  ]
}
  

информация об ионе

 Ionic:

   Ionic CLI                     : 6.10.1 (/home/user/.nvm/versions/node/v12.18.3/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.3.1
   @angular-devkit/build-angular : 0.1000.5
   @angular-devkit/schematics    : 10.0.5
   @angular/cli                  : 10.0.5
   @ionic/angular-toolkit        : 2.3.3

Capacitor:

   Capacitor CLI   : 2.4.0
   @capacitor/core : 2.4.0

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.18.3 (/home/user/.nvm/versions/node/v12.18.3/bin/node)
   npm    : 6.14.6
   OS     : Linux 5.4
  

Есть идеи, как это решить? Я искал целую вечность…

Редактировать:

Итак, я следовал инструкциям Angular о том, как создать перехватчик, и этой статье, в которой объясняется, как реализовать как HttpClient, так и собственный HTTP Ionic, но я столкнулся с новыми проблемами.

Используя код из статьи, TS жалуется на эту строку:

headers: nativeHttpResponse.headers

 (property) headers?: HttpHeaders
Type '{ [key: string]: string; }' is missing the following properties from type 'HttpHeaders': headers, normalizedNames, lazyInit, lazyUpdate, and 12 more.ts(2740)
http.d.ts(3406, 9): The expected type comes from property 'headers' which is declared here on type '{ body?: any; headers?: HttpHeaders; status?: number; statusText?: string; url?: string; }'
  

Here’s the whole native-http.interceptor.ts:

 import { Injectable } from "@angular/core";
import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpResponse,
} from "@angular/common/http";
import { Observable, from } from "rxjs";
import { Platform } from "@ionic/angular";
import { HTTP } from "@ionic-native/http/ngx";

type HttpMethod =
  | "get"
  | "post"
  | "put"
  | "patch"
  | "head"
  | "delete"
  | "upload"
  | "download";

@Injectable()
export class NativeHttpInterceptor implements HttpInterceptor {
  constructor(private nativeHttp: HTTP, private platform: Platform) {}

  public intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    if (!this.platform.is("cordova")) {
      return next.handle(request);
    }

    return from(this.handleNativeRequest(request));
  }

  private async handleNativeRequest(
    request: HttpRequest<any>
  ): Promise<HttpResponse<any>> {
    const headerKeys = request.headers.keys();
    const headers = {};

    headerKeys.forEach((key) => {
      headers[key] = request.headers.get(key);
    });

    try {
      await this.platform.ready();

      const method = <HttpMethod>request.method.toLowerCase();

      // console.log(‘— Request url’);
      // console.log(request.url)
      // console.log(‘— Request body’);
      // console.log(request.body);

      const nativeHttpResponse = await this.nativeHttp.sendRequest(
        request.url,
        {
          method: method,
          data: request.body,
          headers: headers,
          serializer: "json",
        }
      );

      let body;

      try {
        body = JSON.parse(nativeHttpResponse.data);
      } catch (error) {
        body = { response: nativeHttpResponse.data };
      }

      const response = new HttpResponse({
        body: body,
        status: nativeHttpResponse.status,
        headers: nativeHttpResponse.headers,  <--------
        url: nativeHttpResponse.url,
      });

      // console.log(‘— Response success’)
      // console.log(response);

      return Promise.resolve(response);
    } catch (error) {
      if (!error.status) {
        return Promise.reject(error);
      }

      const response = new HttpResponse({
        body: JSON.parse(error.error),
        status: error.status,
        headers: error.headers,
        url: error.url,
      });

      return Promise.reject(response);
    }
  }
}
  

Вот как это app.module.ts выглядит:

 import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IonicModule } from '@ionic/angular';
import { HTTP } from '@ionic-native/http/ngx';

import { CoreModule } from './core/core.module';
import { SharedModule } from './shared/shared.module';
import { AppComponent } from './app.component';
import { PageNotFoundComponent } from './shared/page-not-found/page-not-found.component';
import { appRoutes } from './app.routes';


@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    SharedModule,
    CoreModule,
    RouterModule.forRoot(
      appRoutes
    ),
    IonicModule.forRoot()
  ],
  providers: [HTTP],
  declarations: [
    AppComponent,
    PageNotFoundComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
  

Иd вот как выглядит мой core.module.ts (где я хочу использовать interceptor):

 import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { HTTP_INTERCEPTORS, HttpClientModule } from "@angular/common/http";

import { NativeHttpInterceptor } from "./service/native-http.interceptor";
import { AuthService } from "./service/auth.service";
import { ApiService } from "./service/api.service";
import { AuthGuardService } from "./service/auth-guard.service";
import { AuthInterceptor } from "./service/auth-interceptor";
import { WindowRef } from "./service/window-ref-service";

@NgModule({
  imports: [CommonModule, HttpClientModule],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: NativeHttpInterceptor,
      multi: true,
    },
    AuthService,
    ApiService,
    AuthGuardService,
    WindowRef,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true,
    },
  ],
})
export class CoreModule {}
  

Конфигурации прокси будут работать только для ionic serve или livereload из собственных сборок.

Если вы не можете изменить какой-либо параметр в BE, то самый простой способ — использовать собственный плагин для HTTP-запросов cordova-plugin-advanced-http, который будет отправлять запросы без заголовка origin (поскольку он не отправляется из браузера).

Вы можете использовать для этого собственную оболочку Ionic здесь.