如何解决 Ionic 4 中 Rest API 的 CORS 策略问题

Question

我正在尝试在我的 IONIC 应用程序中使用 REST API（我无法控制后端 API），但在请求期间我遇到了 CORS 问题。 我正在使用 HTTP 客户端来请求 API Rest，并且我尝试使用来自“@ionic-native/http/ngx”的 HTTP 遵循与 CORS 错误（https://ionicframework.com/docs/troubleshooting/cors#cors-headers）相关的离子框架中的文档，但两者都没有实施正在发挥作用。 你能帮我理解如何解决这个问题吗？遵循我的实现。非常感谢

使用 HTTP CLIENT 实现：

private url = 'https://abcdefghijkl/8020/stats?sid=1&json=1'; //REST API

// Headers
private httpOptions = {
    headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, PUT',
        'Access-Control-Allow-Headers': 'Content-Type'})
};

private constructor(private httpClient: HttpClient, private http: HTTP) {}

/**
 * Retrieves playing information
 *
 * @returns {Observable<any[]>}
 */
public getDataUsingHTTPClient(): Observable<any> {
    return this.httpClient.get<any>(this.url, this.httpOptions);
        /*.pipe(
            retry(2),
            catchError(this.handleError));*/
}

// Manipulação de erros
handleError(error: HttpErrorResponse) {
    let errorMessage = '';
    if (error.error instanceof ErrorEvent) {
        // Client side error
        errorMessage = error.error.message;
    } else {
        // Server side error
        errorMessage = `Código do erro: ${error.status}, ` + `menssagem: ${error.message}`;
    }
    console.log(errorMessage);
    return throwError(errorMessage);
}

使用来自 '@ionic-native/http/ngx' 的 HTTP 实现

public async getDataUsingHTTP() {
    try {
        const url = 'https://radion.jmhost.com.br/radio/8020/stats?sid=1&json=1';
        const params = {};
        const headers = {
            'content-type': 'application/json',
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, PUT'};

        const response = await this.http.get(url, null, headers);

        console.log(response);
        console.log(JSON.parse(response.data)); // JSON data returned by server
        console.log(response.headers);

      } catch (error) {
        console.error(error.status);
        console.error(error.error); // Error message as string
        console.error(error.headers);
      }
}

关注我的 app.module.ts：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { BackgroundMode } from '@ionic-native/background-mode/ngx';
import { AppAvailability } from '@ionic-native/app-availability/ngx';
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
import { SocialSharing} from '@ionic-native/social-sharing/ngx';
import { HttpClientModule } from '@angular/common/http';
import {HTTP} from '@ionic-native/http/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    BackgroundMode,
    AppAvailability,
    InAppBrowser,
    SocialSharing,
    HTTP
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Answer 1

由于您无权访问后端，我建议您使用https://github.com/silkimen/cordova-plugin-advanced-http。这个插件绕过了 CORS，所以你不会有任何问题。

Ionic 插件就是这个https://ionicframework.com/docs/native/http。使用它而不是 Angular。