IONIC 3 CORS PROBLEME

Question

Je rencontre un problème CORS avec Ionic 3 lorsque j'essaie de faire des appels GET à une API. J'utilise le serveur local ionique, en cours d'exécution ionique servir dans la ligne de commande pour le serveur en direct.

Erreur Aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée. L'origine 'http://localhost:8100' n'est donc pas autorisée.

J'ai essayé de mettre à jour "ionic.config.json" avec réglage de proxy, mais cela ne semble pas fonctionner ..

{ 
    "name": "projectLeagueApp", 
    "app_id": "47182aef", 
    "type": "ionic-angular", 
    "integrations": { 
    "cordova": {} 
    }, 
    "proxies": [ 
    { 
     "path":"/games", 
     "proxyUrl": "https://api-2445582011268.apicast.io/games/" 
    } 
    ] 
} 

Mon Data Service

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


@Injectable() 
export class DataProvider { 

    headers = new Headers({'user-key': '1234567890123'}); 
    options = new RequestOptions ({headers: this.headers}); 
    limit: number = 50; 

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

    getGames(genre, offset_num) { 

    let genre_id = genre; 
    let offset = offset_num; 

    return this.http.get('https://api-2445582011268.apicast.io/games/?fields=name,release_dates,screenshots&limit='+this.limit+'&offset='+offset+'&order=release_dates.date:desc&filter[genres][eq]='+genre_id+'&filter[screenshots][exists]', this.options) 
    } 

} 

Je suis en train de faire des appels à cet api

Demander Url https://api-2445582011268.apicast.io TÊTES Clé Valeur YOUR_KEY clé utilisateur Accepter application/json

Question primaire Mes appels échouent. Comment puis-je créer un proxy pour ce problème?

Answer 1

La fonctionnalité proxy attend que vous référençant le serveur local. Dans votre requête GET, vous êtes toujours pointé sur l'API distante. Si vous modifiez votre code à this.http.get('/games/...' il devrait commencer à fonctionner car la demande ira à http://localhost:8100/games..., que l'option "proxy" va attraper et transmettre à l'URL que vous avez fournie. Vous pouvez également mettre uniquement https://api-2445582011268.apicast.io dans le champ proxyUrl. Je pense que le reste du chemin est passthrough.

Answer 2

Pour résoudre ce problème, s'il vous plaît changer les lignes suivantes

ionic.config.json

{ 
    "name": "projectLeagueApp", 
    "app_id": "47182aef", 
    "type": "ionic-angular", 
    "integrations": { 
    "cordova": {} 
    }, 
    "proxies": [ 
    { 
     "path":"/games", 
     "proxyUrl": "https://api-2445582011268.apicast.io/games" 
    } 
    ] 
} 

Vous devez supprimer le «/» qui est à la fin de de « proxyUrl ».

Mon Data Service

return this.http.get('/games/?fields=name,release_dates,screenshots&limit='+this.limit+'&offset='+offset+'&order=release_dates.date:desc&filter[genres][eq]='+genre_id+'&filter[screenshots][exists]', this.options) 

Dans l'appel http, l'URL doit commencer par '/ jeux'. '/ games' car ionic procèdera par procuration http://localhost:<port>/games à https://api-2445582011268.apicast.io/games

Veuillez utiliser la méthode ci-dessus pour les appels GET et POST externes dans votre application.

Merci.