CORS issue in "ionic cordova run android"


#1

Hi Guys, I’ve just started learning ionic, I used httpClient get with basic auth for some information from

https://billplz-staging.herokuapp.com/api/v3/bills/kui5wjoh
Authorization : ODg0MTk0YmItZGY1My00Nzg5LWJmY2YtYjg0NDIzMDg4ZmIx

(this is just a sandbox mode authentication for this api, a simulation for payment gateway )

constructor( public bro:InAppBrowser,public http: Http,public navCtrl: NavController) {

  }

callApi(){

var headers = new HttpHeaders({'Authorization':'Basic ODg0MTk0YmItZGY1My00Nzg5LWJmY2YtYjg0NDIzMDg4ZmIx'});

this.http.get("https://billplz-staging.herokuapp.com/api/v3/bills/kui5wjoh", {headers:headers})
      .subscribe(

        data=>{
          console.log(data)
          const browser = this.bro.create(data['url']);
        },err=>{
          console.log('Error',err)
        }
      );
      
     
    

 }
 }

the output:
Access to XMLHttpRequest at ‘https://billplz-staging.herokuapp.com/api/v3/bills/kui5wjoh’ from origin ‘http://localhost:8100’ has been blocked by CORS policy: Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.

what i did:
install CORS plugin- (solves, but cant bring to ionic cordova run android )
proxy in ionic.config.jsoin -(works, not working in ionic cordova run android )

What i’ve expected

but what i get in ionic cordova run android:
Failed to load https://billplz-staging.herokuapp.com/api/v3/bills/kui5wjoh: Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.

i’ve already try adding in ‘Access-Control-Allow-Headers’:‘authorization’
‘Access-Control-Allow-Origins’:’*’ in the header , but none works for me, please help


#2

Those headers you mention (Access-Control-Allow-Origins) are correct, but they have to be set on the server-side, are you using nodejs for the api? Quite easy to configure by searching for the framework.


#3

Hi @jalu14, i am sorry but i am quite new to coding,

yes i am using nodejs for the development.
do you have any link to show? e.g
where can i server side configuration, i dont quite understand what is server side configuration


#4

Take a look at this link, make sure to append app.use before any request.
https://enable-cors.org/server_expressjs.html