Ionic2, Angular2: Comment éviter le problème CORS lors de l'utilisation de http get for REST API service call?

Question

J'ai mon backend sur un serveur distant pour lequel j'ai l'URL. Je dois rendre les données à partir de là dans mon Ionic2, projet Angular2 via HTTP GET et POST methods.But Je suis avec cette erreur jeté quand je suis en train de faire un appel de service:

XMLHttpRequest cannot load http://192.162.91.159:8080/movieengine2/api/search/getMoviedetails . 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:8100 ' is therefore not allowed access/

J'ai cherché beaucoup sur internet mais la plupart de ces forums sont trop vieux. J'ai parlé de ce qui suit:

Angular 2 - No 'Access-Control-Allow-Origin' header is present on the requested resource

https://forum.ionicframework.com/t/cors-problem-with-ionic-2-and-angular-2-no-access-control-allow-origin-header-is-present-on-the-requested-resource/58350/6

https://forum.ionicframework.com/t/ionic-2-cors-issue/59815

https://github.com/angular/angular/issues/13554

C'est ce que j'ai dans mon dossier de service

import { Injectable } from '@angular/core'; 
import { Http, Headers, Response, RequestOptions, BaseRequestOptions } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/do'; 
import 'rxjs/add/operator/catch'; 

@Injectable() 
export class TestService { 
    backendUrl:string=''; 
    parameters: RequestOptions; 

    constructor(public http: Http) { 
    console.log('Hello TestService Provider'); 
    } 

    private extractData(res: Response) { 
    let body = res.json(); 
    return body || {}; 
    } 

    private handleError(error: Response){ 
    return Observable.throw(error.json().error || 'Server Error') 
    } 


    get(url, params) 
    { 
    var headers = new Headers 
     ({ 
    'X-Requested-With': 'XMLHttpRequest' 
     }); 
     headers.append("Accept", 'application/json'); 
    headers.append('Content-Type', 'application/json'); 
     let options = new RequestOptions({ headers: headers }); 

     this.backendUrl='http://192.162.91.159:8080/movieengine2/api/search/'+url; 
     return this.http.get(this.backendUrl).map(this.extractData).catch(this.handleError); 
    } 

J'ai même essayé d'ajouter dans mon ionic.config.json

"proxies": [ 
{ 
    "path": "/api", 
    "proxyUrl": "http://api.steampowered.com" 
} 

]

Quelqu'un peut-il me dire comment éviter ce problème? Je veux une solution permanente qui peut fonctionner sur l'appareil ou le navigateur. Merci d'avance. Ce sont les versions que j'utilise.

"cors": "^2.8.3", 
"ionic-angular": "2.1.0", 
"ionic-native": "2.4.1", 
"ionicons": "3.0.0", 
"rxjs": "5.0.0-beta.12", 
"sw-toolbox": "3.4.0", 
"underscore": "^1.8.3", 
"zone.js": "0.6.26" 

Je n'arrive pas à trouver une solution adaptée à la version que j'utilise.

Answer 1

Il y a 4 façons d'aborder ce:

1. Vous pouvez configurer un proxy (read this tutorial)

2. Vous pouvez lancer votre application via un émulateur ou un téléphone mobile (inconvinient)

3. Vous pouvez passer les questions CORS en installant le cordova Whitelist plugin

4. Vous pouvez un Essayez aussi d'installer le Chrome Allow-Control-Origin extension.