Ionic2 proxies not working with ionic run but working with ionic serve? - ionic2

Question

For my ionic.config.json I have:
{
"name": "TSICMobile",
"app_id": "6e4680fa",
"typescript": true,
"v2": true,
"proxies": [
{
"path": "/api",
"proxyUrl": "http://192.168.0.105:8081/api"
}
]
}
In my provider (user-data.ts, based on Ionic2 conference app) I have for example:
login(credentials) {
return new Promise((resolve, reject) => {
this.http.post(
'/api/Login',
JSON.stringify(credentials),
{ headers: this.contentHeader }
).subscribe(res => {
console.log('api/Login return');
this.data = res.json();
if (this.data.authenticated === true) {
this.storage.set('TSIC_USER_PROFILE', JSON.stringify(this.data.tsiC_USER_PROFILE));
this.storage.set('TSIC_USER_ROLES', JSON.stringify(this.data.listRoles));
this.storage.set('tsic_id_token', this.data.token);
this.events.publish('user:login');
resolve(true);
} else {
reject('not authenticated');
}
}, error => {
console.log('api/Login failed');
reject(error);
});
});
}
when running:
ionic serve --lab -c
the proxy works perfectly and posts to http://192.168.0.105:8081/api/Login
when running
ionic run android -c
the post url is file://api/Login, and obviously fails.
Need assistance in understanding why (seemingly), the proxy is not in effect when running on device, and what I may be doing wrong or not understanding.

Answer 1

You don't need a proxy when you are on your device because ionic can handle the cors there. You need the proxy on serve because the browser is trying to handle the CORS and its more strict with it.
What I suggest you do is check if window.cordova exists and if it does use the normal url and otherwise the proxy url.
Like this:
login(credentials) {
return new Promise((resolve, reject) => {
this.http.post(
window.cordova?:'http://192.168.0.105:8081/api/Login':'/api/Login':,
JSON.stringify(credentials),
{ headers: this.contentHeader }
).subscribe(res => {
console.log('api/Login return');
this.data = res.json();
if (this.data.authenticated === true) {
this.storage.set('TSIC_USER_PROFILE', JSON.stringify(this.data.tsiC_USER_PROFILE));
this.storage.set('TSIC_USER_ROLES', JSON.stringify(this.data.listRoles));
this.storage.set('tsic_id_token', this.data.token);
this.events.publish('user:login');
resolve(true);
} else {
reject('not authenticated');
}
}, error => {
console.log('api/Login failed');
reject(error);
});
});
}

Answer 2

Short answer is the proxy is really only useful for ionic serve. For ionic run you need to use cordova-plugin-whitelist
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-whitelist/
What this means for you though is, you'll have to swap your URIs during build. So instead of just /api/myAwesomeService you'll actually have http://192.168.0.105:8081/api as your URI when running on a real device.

Answer 3

this official article exactly shows you how to deal with this situation.
http://blog.ionic.io/handling-cors-issues-in-ionic/
an easier way is defining a Constant just like this:
.constant('SERVER', {
// when not using proxy
//url: 'https://myextsite.com/api/public/index.php/v1'
// when using proxy
url: 'v1'
})
ref: https://forum.ionicframework.com/t/solved-ionicview-app-http-request-to-external-api/18696/3