Ionic-4-rest-api-calls-not-working-on-the-device

OmkarHLT · January 12, 2019, 2:43pm

Hello Team Struggling to get the API working on android Device tried the below ways still no help.

Have my release in 2 days but stuck with this issue

Tried

Updated the config.xml with allowed and access tags
updated api to allow access from same origin
Updated the cordova plugins nothing seems working
4, Added to index file

Config.xmL

<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
 <access origin="*" />

   <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" /

Index.html

<meta http-equiv="Content-Security-Policy" content="img-src 'self' data:; default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">


Cnfiguration Details

 cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.0.0, (and 7 other plugins)

System:

   NodeJS : v10.7.0 (C:\Program Files\nodejs\node.exe)
   npm    : 5.3.0
   OS     : Windows 10

ionic (Ionic CLI)             : 4.6.0
   Ionic Framework               : @ionic/angular 4.0.0-beta.7
   @angular-devkit/build-angular : 0.7.5
   @angular-devkit/schematics    : 0.7.5
   @angular/cli                  : 6.1.5
   @ionic/angular-toolkit        : not installed

Error [Error screen](https://i.stack.imgur.com/kQGm5.png)

Please Help

OmkarHLT · January 14, 2019, 2:56pm

Please Help Im struggling on this

mikrochipkid · January 14, 2019, 3:17pm

You need to elaborate more on your issue, show your code. How are you calling it. Without it, we cant help.

OmkarHLT · January 14, 2019, 3:39pm

My api calls are working on the ionic serve but not on the device or emulatr
getting unknown error .

Enabled Cors at server still no success
even PWA is not working

getLearningCenters(): Observable&lt;LearningCenter&gt; {

console.log(Api.LearningCenters);

return this.http.get&lt;LearningCenter&gt;(Api.LearningCenters);
}

url : http://api.mylearnerapp.com/api/learningcenters

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ionic App</title>

  <base href="/"/>

  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <link rel="icon" type="image/png" href="assets/icon/favicon.png">

  <!-- add to homescreen for ios -->
  
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta http-equiv="Content-Security-Policy" content="img-src 'self' data:; default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#1976d2">
</head>
<body>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDJJ_gr7gYXe76W7iJXtfDYGsbRK6EJCa0&amp;libraries=places"></script>
  <app-root></app-root>
  <noscript>Please enable JavaScript to continue using this application.</noscript>
</body>
</html>

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>LAppMobile</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:*" />
    <allow-navigation href="http://*/*" />
    <allow-navigation href="https://*/*" />
    <preference name="ScrollEnabled" value="false" />
    <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
    <preference name="android-minSdkVersion" value="19" />
    <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-statusbar" spec="2.4.2" />
    <plugin name="cordova-plugin-device" spec="2.0.2" />
    <plugin name="cordova-plugin-splashscreen" spec="5.0.2" />
    <plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />
    <plugin name="cordova-plugin-geolocation" spec="^4.0.1" />
    <plugin name="cordova-plugin-youtube-video-player" spec="^1.0.6" />
    <plugin name="cordova-plugin-firebase" spec="0.1.25">
        <variable name="APP_ID" value="1:158189515548:android:8c3b8bb052e59536" />
        <variable name="API_KEY" value="AIzaSyC4v6pXw_2HHoaKqQeZyYR--VfK0qcbyw8" />
    </plugin>
    <plugin name="cordova-plugin-ionic-webview" spec="3.0.0">
        <variable name="ANDROID_SUPPORT_ANNOTATIONS_VERSION" value="27.+" />
    </plugin>
    <plugin name="cordova-plugin-whitelist" spec="^1.3.3" />
    <engine name="browser" spec="5.0.4" />
    <engine name="android" spec="7.1.4" />
</widget>

Package Json

{
  "name": "LearnerApp",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.1.1",
    "@angular/common": "^5.2.11",
    "@angular/core": "~6.1.1",
    "@angular/forms": "~6.1.1",
    "@angular/http": "~6.1.1",
    "@angular/platform-browser": "~6.1.1",
    "@angular/platform-browser-dynamic": "~6.1.1",
    "@angular/pwa": "^0.12.1",
    "@angular/router": "^5.2.11",
    "@angular/service-worker": "~6.1.1",
    "@ionic-native/core": "5.0.0-beta.15",
    "@ionic-native/facebook": "^5.0.0-beta.22",
    "@ionic-native/file": "^5.0.0-beta.22",
    "@ionic-native/firebase": "^5.0.0-beta.22",
    "@ionic-native/geolocation": "^5.0.0-beta.22",
    "@ionic-native/splash-screen": "5.0.0-beta.15",
    "@ionic-native/status-bar": "5.0.0-beta.15",
    "@ionic-native/youtube-video-player": "^5.0.0-beta.4",
    "@ionic/angular": "4.0.0-beta.7",
    "@ionic/angular-toolkit": "^1.2.2",
    "@ionic/storage": "^2.2.0",
    "@wazio/date-time": "^0.1.1",
    "@yellowspot/ng-truncate": "^1.4.0",
    "angular2-tag-input": "^1.2.3",
    "angularfire2": "^5.1.1",
    "clean": "4.0.2",
    "cordova-android": "7.1.4",
    "cordova-browser": "5.0.4",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-file": "6.0.1",
    "cordova-plugin-firebase": "^0.1.25",
    "cordova-plugin-geolocation": "^4.0.1",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^3.0.0",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-video-player": "git+https://github.com/moust/cordova-plugin-videoplayer.git",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-plugin-youtube-video-player": "^1.0.6",
    "core-js": "^2.5.3",
    "firebase": "^5.7.2",
    "google-maps": "^3.3.0",
    "ionic": "^4.6.0",
    "ionic-selectable": "^4.1.3",
    "moment": "^2.22.2",
    "ngx-chips": "^2.0.0-beta.0",
    "ngx-custom-validators": "^6.1.0",
    "node-sass": "^4.9.3",
    "platform": "1.3.5",
    "rxjs": "^6.3.3",
    "rxjs-compat": "^6.3.3",
    "typescript-string-operations": "^1.3.1",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.7.2",
    "@angular-devkit/build-angular": "~0.7.2",
    "@angular-devkit/core": "~0.7.2",
    "@angular-devkit/schematics": "~0.7.2",
    "@angular/cli": "~6.1.1",
    "@angular/compiler": "~6.1.1",
    "@angular/compiler-cli": "~6.1.1",
    "@angular/language-service": "~6.1.1",
    "@ionic/app-scripts": "^3.2.1",
    "@ionic/ng-toolkit": "^1.0.0",
    "@ionic/schematics-angular": "^1.0.6",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~10.9.2",
    "codelyzer": "~4.4.2",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~2.9.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-geolocation": {},
      "cordova-plugin-youtube-video-player": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-firebase": {
        "APP_ID": "1:158189515548:android:8c3b8bb052e59536",
        "API_KEY": "AIzaSyC4v6pXw_2HHoaKqQeZyYR--VfK0qcbyw8"
      },
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      }
    },
    "platforms": [
      "browser",
      "android"
    ]
  }
}

Proxyconfig

{
    "/maps/api": {
        "target": "https://maps.googleapis.com/",
        "changeOrigin": true,
        "secure": true,
        "logLevel": "debug"
      },
    "/api": {
       "target": "http://api.mylearnerapp.com/",
       "changeOrigin": true,
       "secure": false,
       "logLevel": "debug"
     }
   }

mikrochipkid · January 14, 2019, 3:52pm

It’s possibly an issue with CORS. When you install on your physical devices, and have them plugin to see consoles. what does the errors say? either iOS or android.

If you have access to the API, your best bet would be to enable the CORS on your server by over-riding the .htaccess file. Should be something like this:

Header add Access-Control-Allow-Origin: “*”
Header add Access-Control-Allow-Methods: “GET”
Header add Access-Control-Allow-Headers: “Content-Type”

OmkarHLT · January 14, 2019, 4:01pm

I have enabled the CORS at server side with configuration as mentioned in thois linkEnable CORS

My screenshot of error on android device Error Screen shot

mikrochipkid · January 14, 2019, 4:23pm

Show the method where u are getting the data from the API

OmkarHLT · January 14, 2019, 4:24pm

getLearningCenters(): Observable<LearningCenter> {

console.log(Api.LearningCenters);

return this.http.get<LearningCenter>(Api.LearningCenters);
}
//Api.LearningCenters="http://api.mylearnerapp.com/api/learnerningcenters"

OmkarHLT · January 16, 2019, 12:20am

mikrochipkid any clue?

yesroh · January 21, 2019, 11:34am

What is the error that is showing on device?

OmkarHLT · January 21, 2019, 11:46am

Got this fixed by enabling server side Cors thanks for the help everyone

ElianoOliveira · May 9, 2019, 9:29pm

I’ve already enabled cors on the server side but unsuccessfully

innovatorsnest · July 24, 2019, 12:03pm

I also got the same issue and this one is the serios which needs to be resolved.

i used the two apis.

some random data api i used this one - http://dummy.restapiexample.com/api/v1/employees
created in node

output for 1:
it seems to work fine in my device and in browser here is the screenshot below

output for 2: (data is not showing in the device)

innovatorsnest · July 24, 2019, 12:25pm

bus here the second out is showing data into the browser but in the device it is not showing the data.

nim-bitsmiths · August 22, 2019, 10:41am

Not sure if this will solve your problem but it solved mine:

Android Emulation App Cannot See Network

The solution is to go to ~/resources/android/xml/network_security_config.xml in your ioinc app and add the 10.0.2.2 to the security config as below.
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">localhost</domain>
        <domain includeSubdomains="true">10.0.2.2</domain>
    </domain-config>
</network-security-config>

Sandy1198 · November 29, 2019, 12:44pm

10.0.2.2 this is ur ip address right

karabillie · January 22, 2020, 7:49pm

Hi. I am facing exactly the same problem. Did u solve it?

rapropos · January 22, 2020, 8:03pm

The post you replied to is using an HTTP endpoint, not HTTPS. If that’s the case with you as well, try changing your endpoint to use HTTPS instead and see if the problem persists.

karabillie · January 22, 2020, 8:04pm

Hi. I am facing the same problem. Did u solve it?

karabillie · January 22, 2020, 8:26pm

Hi! I am already using HTTPS endpoints. It is really weird since the api calls are sent but the data is coming back with a delay. In the browser, everything works in time.