Ionic - HTTP Post working on serve and -l but not working when run on android device

Question

let headers = new Headers({ 
    'Content-Type' : 'application/json'
});

let options = new RequestOptions({ headers: headers });
this.http.post('https://cors-anywhere.herokuapp.com/'+url, body, options)
  .subscribe(data => {
    let response = JSON.parse(data['_body']);
    if (response.MessageCode == 'SUCCESS') {
      this.loginMessage = 'success';
      this.navCtrl.push(HomePage, response);
    }
    else {
      this.loginMessage = 'failure';
    }

   }, error => {
    console.log(error);
  });

I'm having CORS issue. So, I used it before the URL to make it work.

Below is the config.xml

<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<preference name="ScrollEnabled" value="false" />
<preference name="android-minSdkVersion" value="16" />
<preference name="BackupWebStorage" value="none" />
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />
<plugin name="cordova-plugin-splashscreen" spec="^5.0.2" />
<plugin name="cordova-plugin-ionic-webview" spec="^1.1.16" />
<plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />
<plugin name="cordova-plugin-device" spec="^2.0.1" />
<plugin name="cordova-plugin-whitelist" spec="^1.3.3" />
<plugin name="cordova-plugin-advanced-http" spec="^1.11.0" />

Request headers-

Accept: */*
Accept-Encoding: gzip, deflate
Accept-Language: en-GB,en-US;q=0.9,en;q=0.8
Access-Control-Request-Headers: content-type
Access-Control-Request-Method: POST
Connection: keep-alive
Host: 64.77.72.122
Origin: http://localhost:8100

Response headers-

Connection: close
Content-Length: 1245
Content-Type: text/html
Date: Thu, 15 Mar 2018 15:37:44 GMT
Server: Microsoft-IIS/8.5
X-Powered-By: ASP.NET

I have tried all the options mentioned in other similar questions like the one mentioned below.

this

Can someone address this issue? TIA.

Can you PLEASE include a full set of request AND response headers that you're seeing, for both the preflight OPTIONS request (if any) and also the GET/POST request that you're trying to make. — roryhewitt, Mar 14 '18 at 01:38
Nevermind. Fixed it. It had something to do with server-side and body params. Thank you for your time! — Akash Chintha, Mar 16 '18 at 05:16

score 0 · Answer 1 · answered Mar 13 '18 at 11:59

0

To resolve the CORS issue, I would recommend this extension for Chrome, since you will only have this kind of error while running on browser.

Allow-Control-Allow-Origin: *

Remove all you have done to solve the CORS issue and try to run again your program.

answered Mar 13 '18 at 11:59

Humberto de Carvalho

147
6

The extension will do it for you. You just need to install it. – Humberto de Carvalho Mar 13 '18 at 12:53
I tried that chrome extension. Didn't work. But appending https://cors-anywhere.herokuapp.com/ to the url worked during ionic serve and ionic run livereload. Need to fix this. – Akash Chintha Mar 13 '18 at 12:56

Lucius · Answer 2 · 2018-03-14T03:56:31.997

0

Create on your server, in the root of requested URL, a ".htaccess" file with this content:

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "Content-Type"

edited Mar 14 '18 at 03:56

answered Mar 14 '18 at 03:40

Lucius

1,253
1
6
17

score 0 · Answer 3 · answered Mar 16 '18 at 05:51

0

This is a server-side body params issue.

CORS is only a problem while testing on a web browser.

It can be handled by launching the browser as mentioned here. There is no need to use any chrome extensions or plugins to handle it.

answered Mar 16 '18 at 05:51

Akash Chintha

68
9

Ionic - HTTP Post working on serve and -l but not working when run on android device

3 Answers3