IONIC 3 CORS ISSUE

Question

Ich habe ein CORS-Problem mit Ionic 3 beim Versuch, GET-Aufrufe an eine API zu machen. Ich benutze Ionic Local Server, der ionic serve in der Kommandozeile für den Live Server ausführt.

Fehler Kein 'Access-Control-Allow-Origin'-Header ist auf der angeforderten Ressource vorhanden. Origin 'http://localhost:8100' ist daher nicht erlaubt.

Ich habe versucht, "ionic.config.json" mit Proxy-Einstellung zu aktualisieren, aber das scheint nicht zu funktionieren ..

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

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

} 

ich bin versucht, telefonieren Sie zu dieser api

Anfrage Url https://api-2445582011268.apicast.io HEADERS Schlüssel Wert Anwenderschlüssel YOUR_KEY Accept application/json

Primäre Frage Meine Anrufe versagen. Wie erstelle ich einen Proxy für dieses Problem?

Answer 1

Die Proxyfunktion erwartet, dass Sie auf den lokalen Server verweisen. In Ihrer GET-Anfrage werden Sie immer noch auf die Remote-API verwiesen. Wenn Sie Ihren Code zu this.http.get('/games/...' ändern, sollte es anfangen zu funktionieren, da die Anfrage an http://localhost:8100/games... geht, die die "Proxy" -Option fängt und an die URL weitergibt, die Sie zur Verfügung gestellt haben.

Sie können auch nur https://api-2445582011268.apicast.io in das Feld proxyUrl eingeben. Ich denke, der Rest des Weges ist Passthrough.

Answer 2

um dieses Problem zu beheben, benutzen Sie bitte die folgenden Zeilen

ionic.config.json ändern

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

Sie haben die „/“ zu entfernen, die von dem „ProxyURL“ am Ende ist.

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

Im HTTP-Aufruf sollte die URL mit '/ Spielen' beginnen. '/ games' weil ionische wird Proxy http://localhost:<port>/games zu https://api-2445582011268.apicast.io/games

Bitte verwenden Sie die oben genannte Methode für externe GET und POST Anrufe in Ihrer Anwendung.

Vielen Dank.