Http subscribe not working on real device

mrdanishjamil · January 6, 2018, 1:30pm

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.

rafarco · March 20, 2018, 5:46pm

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.

Tommertom · March 21, 2018, 4:57am

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

maruti · March 21, 2018, 8:55am

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

rafarco · March 21, 2018, 11:38am

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!

rafarco · March 21, 2018, 11:49am

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?

Sujan12 · March 21, 2018, 12:01pm

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.

Tommertom · March 21, 2018, 2:29pm

I would bet on a CORS issue needing solution at server

Or native http

rafarco · March 22, 2018, 8:39am

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?

Sujan12 · March 22, 2018, 10:27am

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.

rafarco · March 30, 2018, 5:37pm

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.

rapropos · March 30, 2018, 6:21pm

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

zdbxcfb97 · June 28, 2018, 6:52am

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

ruby4leo · October 29, 2018, 6:59pm

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

PappJulioNicolas · October 1, 2019, 1:15pm

Same problem here, anyone have a solution?

prabhashi1 · November 15, 2019, 10:59am

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

mrdanishjamil · November 15, 2019, 11:28am

It was a CORS issue on server side.

prabhashi1 · November 15, 2019, 12:28pm

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

prabhashi1 · November 17, 2019, 5:46am

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

mrdanishjamil · November 19, 2019, 8:46am

Can you post the URL you trying to hit?

Topic		Replies	Views
Http Subscribe Error does not work on device ionic-v3	0	1858	July 3, 2017
Events.subscribe not working on Android emulator ionic-v3	1	916	November 23, 2017
Http works fine in serve but not on android device ionic-v3	4	844	November 16, 2016
Android http get is not working at all ionic-v3	13	716	July 19, 2021
Http Call not working Appflow	2	795	July 19, 2021

Http subscribe not working on real device

Related topics