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

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

  1. Updated the config.xml with allowed and access tags
  2. updated api to allow access from same origin
  3. 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

Please Help Im struggling on this

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

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"
     }
   }

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”

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

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

getLearningCenters(): Observable<LearningCenter> {

console.log(Api.LearningCenters);

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

mikrochipkid any clue?

What is the error that is showing on device?

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

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

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

i used the two apis.

  1. some random data api i used this one - http://dummy.restapiexample.com/api/v1/employees
  2. 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)

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

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

10.0.2.2 this is ur ip address right

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

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.

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

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.