Ionic 2 app CORS error while using AngularFire2 and Firebase 3

Question

I'm trying to use the AngularFire2 plugin in my Ionic 2 app to authorize against Google apis using a custom token, while developing in Chrome on my computer. It works fine testing it on my Android phone, the request works and everything. But I'm trying to get it also work in my dev environment.

The error I get while running my app in Chrome is (I removed my key):

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

Telling me that I have problem to make an Options pre request to Googles server. The thing is that I've installed the Chrome addon Allow-Control-Allow-Origin:* and added the "--disable-web-security" argument on Chrome start up. Which works fine for other services but not for AngularFire2, for that specific request.

I've found people having the same problem that recommend to switch to Firefox, which I wont since it breaks other plugins like SQLight storage instead. Is there a way to make this work in Chrome browser?

Temeteron · Accepted Answer · 2017-05-17 12:27:33Z

You could possibly add intermediate servers for your CORS requests, which will make your HTTP requests with CORS preflight and will return you the result, only for the development mode. I have used this approach in one of my projects because i had only a client-side.

So you can do this:

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

Those are the providers you can use:

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 fact, in this approach we don't solve the problem, we just override it. But i think it's a good solution, because you will use it only for the development.

I hope this was helpful, best of luck!

Collectives™ on Stack Overflow

Ionic 2 app CORS error while using AngularFire2 and Firebase 3

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related