I know that question came up many times, but I've now seached the web about two days and tested so many cases, that I think it is time to call some help.
My Case: I've an ionic 2 application with a external API written in node and authenticated with Auth0 and JWT. The main problem is that the request through Http within an android emulated app is not calling the API. It is like the app can not call outside itself. That came up also for and shared ionic cloud app.
How I produce the error:
Before all I installed the whitelist plugin from cordova and allowed EVERYTHING (here the config.xml: https://hastebin.com/fekuvijaxi.xml). I have also added the http-equiv to my index.html (https://hastebin.com/gocevomayo.xml). Now I've stared the app with cordova ionic cordova run android -lcs
. My device below.
The error I can archive from my http wrapper (import { AuthHttp } from 'angular2-jwt';
) is that:
[14:47:36] console.log: http://localhost:8080/api/v1/auth/login
[14:47:36] console.log: {"_body":{"isTrusted":true},"status":0,"ok":false,"statusText":"","headers":{},"type":3,"url":null}
My Service function: https://hastebin.com/zudepameca.coffeescript
Device: Serial: emulator-5584 Emu Version: 26.1.2-4077558 Android: 7.1 (Nougat) - API 25
Ionic Info: global packages:
@ionic/cli-utils : 1.5.0
Cordova CLI : 7.0.1
Ionic CLI : 3.5.0
local packages:
@ionic/app-scripts : 2.0.2
@ionic/cli-plugin-cordova : 1.4.1
@ionic/cli-plugin-ionic-angular : 1.3.2
Cordova Platforms : android 6.2.3 browser 4.1.0 ios 4.4.0
Ionic Framework : ionic-angular 3.5.3
System:
Node : v7.8.0
OS : macOS Sierra
Xcode : Xcode 8.3.3 Build version 8E3004b
ios-deploy : 1.9.1
ios-sim : 5.1.0
npm : 5.3.0
Thanks to @0mpurdy and @captain_jim1 for there time to help me.
How I solved this issue:
At first I'd made sure the problem was not on server side, so I logged any incomming requests. Until I got none, I'd know it was something wrong with my APP.
So in my APP I logged from the end of the problem to the beginning, from every function and observable. And I got an error (listed above). So I searched here and in the web for a solution and found one:
I just had to add this line
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: * 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
into my app/index.hmtl. As descriped here: https://github.com/apache/cordova-plugin-whitelist#content-security-policy