web-dev-qa-db-fra.com

IONIC 3 CORS Issue

J'ai un problème CORS avec Ionic 3 lorsque j'essaie de passer des appels GET vers une API. J'utilise un serveur local ionique, exécutant ionic serve dans la ligne de commande du serveur actif. 

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

J'ai essayé de mettre à jour "ionic.config.json" avec la configuration du 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 service de données

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)
  }

}

J'essaie de faire des appels à cette API

URL de la requêtehttps://api-2445582011268.apicast.io HEADERS Key Valeur User-key YOUR_KEY Accepter application/json

Question principale Mes appels échouent. Comment créer un proxy pour ce problème? 

jsonangularcorsionic3
8
Chris Simmons

Pour résoudre ce problème, veuillez modifier 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 se trouve à la fin de "proxyUrl".

Mon service de données 

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' parce que ionic utilisera un proxy http://localhost:<port>/games pour https://api-2445582011268.apicast.io/games

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

Je vous remercie.

17
Alvin Chettiar

la fonctionnalité proxy s'attend à ce que vous référeniez le serveur local. dans votre demande GET, vous êtes toujours dirigé vers l'API distante. Si vous changez votre code en this.http.get('/games/...', il devrait commencer à fonctionner car la demande ira à http://localhost:8100/games..., que l'option "proxy" capturera et transmettra à l'URL que vous avez fournie.

Vous devrez peut-être aussi uniquement mettre https://api-2445582011268.apicast.io dans le champ proxyUrl. Je pense que le reste du chemin est passthrough.

0
Jeff Woodard

Si vous souhaitez utiliser Google Chrome pour des tests, installez simplement l'extension chrome Autoriser le contrôle d'origine Manière simple et rapide

0
Saurabh Ahuja