Ionic 2 App CORS-Fehler bei der Verwendung von AngularFire2 und Firebase 3

Question

Ich versuche das AngularFire2-Plugin in meiner Ionic 2-App zu verwenden, um Google API mit einem benutzerdefinierten Token zu autorisieren, während ich in Chrome auf meinem Computer entwickle. Es funktioniert gut testen auf meinem Android-Handy, die Anfrage funktioniert und alles. Aber ich versuche es auch in meiner Entwicklungsumgebung funktionieren zu lassen.

Der Fehler ich während meiner App in Chrome laufe (entfernte ich meinen Schlüssel):

OPTIONS https://www.googleapis.com/identitytoolkit/v3/relyingparty/verifyCustomToken?key=<mykey> 
XMLHttpRequest cannot load https://www.googleapis.com/identitytoolkit/v3/relyingparty/verifyCustomToken?key=<mykey>. Response for preflight has invalid HTTP status code 404 

mir zu sagen, dass ich Problem habe eine Option vor Anforderung an Googles Server zu machen. Die Sache ist, dass ich das Chrome-Addon Allow-Control-Allow-Origin:* installiert habe und das Argument "--disable-web-security" beim Start von Chrome hinzugefügt habe. Das funktioniert für andere Dienste, aber nicht für AngularFire2, für diese spezielle Anfrage.

Ich habe Leute gefunden, die das gleiche Problem haben, die empfehlen, zu Firefox zu wechseln, was ich nicht tun würde, da es andere Plugins wie SQLight-Speicher stattdessen bricht. Gibt es eine Möglichkeit, dies im Chrome-Browser zu funktionieren?

Answer 1

Sie könnten möglicherweise Zwischenserver für Ihre CORS-Anfragen hinzufügen, die Ihre HTTP-Anfragen mit CORS-Preflight machen und Ihnen das Ergebnis zurückgeben, nur für den Entwicklungsmodus. Ich habe diesen Ansatz in einem meiner Projekte verwendet, weil ich nur eine Client-Seite hatte.

So können Sie dies tun:

getMyInfo(info: Info, provider?: string) { 
    if (!provider) { 
     provider = 'corsanywhere'; 
    } 



    this.crossGet(`http://google_apis/${Info}/`,`${provider}`).map(res => res.json()) 
        .subscribe(res => { 
     // GOT RESULT 
     console.log("Res: " + res); 
    }); 
} 

Das sind die Anbieter können Sie verwenden:

corsanywhere(url: string, options: any): any { 
     var promise = this.http.get('https://cors-anywhere.herokuapp.com/' + url); 
    return promise; 
}; 

corsnow(url: string, options: any): any { 
    var promise = this.http.get('https://cors.now.sh/' + url); 
    return promise; 
}; 

crossGet(url: string, provider: any, options?: any): any { 
    var promise = this[provider](url, options); 
    return promise; 
}; 

In der Tat, in diesem Ansatz lösen wir das Problem nicht, wir es einfach überschreiben . Aber ich denke, es ist eine gute Lösung, weil Sie es nur für die Entwicklung verwenden werden.

Ich hoffe, das war hilfreich, viel Glück!