Http subscribe not working on real device

Ionic Framework ionic-v3
1

Hi,

I’m trying to access some web services on my local machine which are working fine in browser. But, when I try to access the same services in real device! It doesn’t call the subscribe function. I know this because I have tested it without calling the subscribe function after get or post and it works. But Observer/subscribe function or Promises are not working on real device. Below is the code I’m using for this purpose. Please help.
This piece of code:

var result = this.http.get('someurl for list of data');
    console.log(result);

works on browser and on real device also. It shows: console.log: [object Object] on a click of a button.
On the other hand Observer doesn’t work on real device but, works in browser.

var res = this.http.get(this.partnersUrl).subscribe(result => {
      console.log(result);
    })

The above piece of code shows the output in browser console on click. But, doesn’t show output on click from a real device. I have also tried showing a toast, which works in browser but, not in real device. Whether using ionic cordova run android or in ionic view or Ionic Dev app.

Ionic Info:

cli packages: (C:\Users\danis\AppData\Roaming\nvm\v6.11.5\node_modules)

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.1.2
    Cordova Platforms  : android 6.3.0
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.0.1
    Node              : v6.11.5
    npm               : 3.10.10
    OS                : Windows 10

Environment Variables:

    ANDROID_HOME : C:\Users\danis\AppData\Local\Android\sdk

Misc:

    backend : pro

Ionic plugins list:

cordova-plugin-add-swift-support 1.7.1 "AddSwiftSupport"
cordova-plugin-device 1.1.4 "Device"
cordova-plugin-ionic 2.0.4 "IonicCordova"
cordova-plugin-ionic-webview 1.1.16 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-whitelist 1.3.1 "Whitelist"
ionic-plugin-keyboard 2.2.1 "Keyboard"

config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>Some app</name>
    <description>An awesome Ionic/Cordova app.</description>
    <author email="hi@ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author>
    <content src="index.html" />
    <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" />
    <platform name="android">
        <allow-intent href="market:*" />
        <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
        <icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
        <icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
        <icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
        <icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
        <icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
        <splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
        <splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
        <splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
        <splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
        <splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
        <splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
        <splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
        <splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
        <splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
        <splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
        <splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
        <splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <icon height="57" src="resources/ios/icon/icon.png" width="57" />
        <icon height="114" src="resources/ios/icon/icon@2x.png" width="114" />
        <icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
        <icon height="80" src="resources/ios/icon/icon-40@2x.png" width="80" />
        <icon height="120" src="resources/ios/icon/icon-40@3x.png" width="120" />
        <icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
        <icon height="100" src="resources/ios/icon/icon-50@2x.png" width="100" />
        <icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
        <icon height="120" src="resources/ios/icon/icon-60@2x.png" width="120" />
        <icon height="180" src="resources/ios/icon/icon-60@3x.png" width="180" />
        <icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
        <icon height="144" src="resources/ios/icon/icon-72@2x.png" width="144" />
        <icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
        <icon height="152" src="resources/ios/icon/icon-76@2x.png" width="152" />
        <icon height="167" src="resources/ios/icon/icon-83.5@2x.png" width="167" />
        <icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
        <icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" />
        <icon height="87" src="resources/ios/icon/icon-small@3x.png" width="87" />
        <icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" />
        <splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
        <splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
        <splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
        <splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
        <splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" />
        <splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" />
        <splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" />
        <splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
        <splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" />
        <splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
        <splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
        <splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
        <splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" />
    </platform>
    <plugin name="cordova-plugin-whitelist" spec="1.3.1" />
    <plugin name="cordova-plugin-device" spec="1.1.4" />
    <plugin name="cordova-plugin-splashscreen" spec="~4.0.1" />
    <plugin name="cordova-plugin-ionic-webview" spec="^1.1.11" />
    <plugin name="ionic-plugin-keyboard" spec="^2.2.1" />
    <engine name="android" spec="~6.3.0" />
    <allow-navigation href="http://localhost:8100" />
    <allow-navigation href="http://192.168.0.10:8100" />
    <allow-navigation href="http://*/*" />
    <allow-navigation href="https://*/*" />
    <plugin name="cordova-plugin-ionic" spec="^2.0.4">
        <variable name="APP_ID" value="84027630" />
        <variable name="CHANNEL_NAME" value="Master" />
        <variable name="UPDATE_METHOD" value="background" />
        <variable name="UPDATE_API" value="https://api.ionicjs.com" />
        <variable name="MAX_STORE" value="2" />
    </plugin>
</widget>

I can’t move forward until this issue is resolved. Any help would be highly appreciated. Thanks in advance.

2

I’m having the same issue. It works in the browser, with proxies to avoid CORS, but running it on iOS ir the emulator doesn’t, even after having got rid of the proxies. In principle the HTTP POST request is made, but the observable’s subscribe method does nothing. Any help is appreciated.

3

Add an error handler to the subscribe method to see why it fails

Subscribe((success)=>{ consolelog etc}, (error)=>{console log (error)})

That will show the subscribe working

If not then the problem is outside the Observable

And read the http doc on angular.io to see how to handle http requests

4

If you are using cordova-plugin-ionic-webview then you may need to use cordova-plugin-advanced-http.

1 Like
5

Thanks for your help, guys. The error is thrown on subscribe. Here is the output:

[12:24:09]  console.error: On subscribe: 
            {"headers":{"normalizedNames":{},"lazyUpdate":null,"headers":{}},"status":0,"statusText":"Unknown 
            Error","url":null,"ok":false,"name":"HttpErrorResponse","message":"Http failure response for (unknown url): 
            0 Unknown Error","error":{"isTrusted":true}}

I don’t understand why it says “unknown url” when I just have https://myserver/login.php (and it works on the browser correctly). Is it a bug of HttpClientModule? I’ll take a look as well at the plugin @maruti mentions. Thanks again!

6

I just found a possible cause related to WKWebView: https://blog.ionicframework.com/wkwebview-for-all-a-new-webview-for-ionic/

So now it’s necessary to use a native HTTP plugin?

7

No, only some requests don’t work the same as before.

Did you remote debug the problem on the device already?
Follow these instructions here to debug the problem in Safari dev tools:
https://ionic.zone/debug/remote-debug-your-app#ios
Follow these instructions here to debug the problem in Chrome dev tools:
https://ionic.zone/debug/remote-debug-your-app#android
Look at the console and network tabs for errors.

8

I would bet on a CORS issue needing solution at server

Or native http

9

Debugging with the web inspector and the simulator (because the web inspector only shows blank tabs, including the console tab, when debugging on the real device), I am getting this:

Failed to load resource: Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin.
XMLHttpRequest cannot load https://myserver//login.php. Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin.

in addition to the output I mentioned previously (unknown url and so on).

I guess myserver is rejecting connections from the URL http://localhost:8080, which doesn’t make much sense. I don’t know if doing this on the real device would be different, but the web inspector doesn’t work (I havae the lastest macOS and iOS versions). How do I solve this?

10

No.

Your server doesn’t include a Access-Control-Allow-Origin header with the value http://localhost:8080. Because of that the app does not get the response of the server because it gets blocked by an internal security mechanism.

Add that header and it will work.

11

Thanks, I’ll try that. Any security issues with that? I hope not, since the requests are only allowed from localhost, port 8080. Does it require to have a web server listening on port 8080? In principle, myserver is only listening on ports 80 and 443, if that’s the internal security mechanism you ae talking about.

Anyway, I find the native http plugin useful because additionally I’d like to upload files to the server, and this plugin includes this functionality apparently.

12

Not really needed. It’s perfectly possible to upload files using the Cordova File plugin and Angular’s HttpClient.

1 Like
13

May i know is this issue solved? because i am facing the same issue now

2 Likes
14

Is this resolve I am facing the same issue, and there is no wkwebview plugin added in my project but still web methods fail the same working fine in Android

15

Same problem here, anyone have a solution?

16

do u guys solved the problem? I’m struggling with the same issue

17

It was a CORS issue on server side.

1 Like
18

hi, Thanks for the quick response. I will look in to it

19

HI again, I tried to solve it with server. my server is build with php. I’m still getting same issue. can you help me please

20

Can you post the URL you trying to hit?