Using Ionic 3, I have written a provider code to fetch data from an API endpoint hosted on an HTTPS server. For example, my endpoint is located at . Below is the code for my provider:
// Provider Class Function
load(){
if(this.data){
return Promise.resolve(this.data);
}
let headers = new HttpHeaders()
.set("Access-Control-Allow-Origin", "*")
.set('Access-Control-Allow-Methods', 'GET, POST')
.set("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
return new Promise(resolve => {
this.http.get('/api/endpoint/article',{headers})
.subscribe(data => {
this.data = data;
resolve(this.data);
},err => {
console.log(err);
});
});
}
// ionic.config.json
{
"name": "app",
"app_id": "app_id",
"type": "ionic-angular",
"integrations": {
"cordova": {}
},
"proxies": [
{
"path": "/api",
"proxyUrl": "https://apiserver/api"
}
]
}
The load() function fetches the data which is displayed in my app. This functionality works perfectly in my localhost, Ionic DevApp, and Ionic View as well as when debugging through the iOS/Xcode emulator.
However, after installing the app on a mobile phone, it fails to retrieve any data and displays a blank page.
I have thoroughly debugged the issue but couldn't find a reason for this behavior. Could it be due to CORS?