Ionic2 / Cordova无法连接到互联网

Question

I have created an app using ionic2 and using a firebase to connect in facebook. So my problem is the app when is used to in web browser works fine, but when I try to run on my device I get this error?

code: "auth/network-request-failed", message: "A network error (such as timeout, interrupted connection or unreachable host) has occurred."

Ok, I know the device can get connection, so my device has a 4g connection and wifi and works fine in other apps. So, I verified the cordova config.xml and shows me <access origin="*"/> , I read the generated AndroidManifest and have a <uses-permission android:name="android.permission.INTERNET" /> .

I don't know what is worng, it`s my first time with ionic and cordova, anyone can help me?

my package.json:

    {
  "name": "xxx",
  "author": "Ricardo",
  "homepage": "http://www.example.com",
  "private": true,
  "scripts": {
    "build": "ionic-app-scripts build",
    "watch": "ionic-app-scripts watch",
    "serve:before": "watch",
    "emulate:before": "build",
    "deploy:before": "build",
    "build:before": "build",
    "run:before": "build"
  },
  "dependencies": {
    "@angular/common": "^2.0.0",
    "@angular/compiler": "^2.0.0",
    "@angular/compiler-cli": "0.6.2",
    "@angular/core": "^2.0.0",
    "@angular/forms": "^2.0.0",
    "@angular/http": "^2.0.0",
    "@angular/platform-browser": "^2.0.0",
    "@angular/platform-browser-dynamic": "^2.0.0",
    "@angular/platform-server": "^2.0.0",
    "@angular/router": "^2.0.0-rc.2",
    "@ionic/storage": "^1.0.3",
    "angularfire2": "^2.0.0-beta.5",
    "cordova": "^6.3.1",
    "firebase": "^3.5.0",
    "ionic-angular": "^2.0.0-rc.1",
    "ionic-native": "^2.2.7",
    "ionicons": "^3.0.0",
    "ng2-image-lazy-load": "^2.0.9",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.21"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^0.0.33",
    "@types/request": "0.0.30",
    "ng2-facebook": "0.0.3",
    "ng2-facebook-sdk": "^1.0.0",
    "reflect-metadata": "^0.1.2",
    "typescript": "^2.0.3"
  },
  "description": "xxx: ",
  "cordovaPlugins": [],
  "cordovaPlatforms": [],
  "config": {
    "ionic_rollup": "./config/rollup.config.js",
    "ionic_copy": "./config/copy.config.js"
  }
}

and my config.xml:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="br.com.xxx.app" version="2.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <name>xxx</name>
  <description>An awesome Ionic/Cordova app.</description>
  <author email="xxx@gmail.com" href="http://www.example.com">xxx 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:*"/>
  <platform name="android">
    <allow-intent href="market:*"/>
  </platform>
  <platform name="ios">
    <allow-intent href="itms:*"/>
    <allow-intent href="itms-apps:*"/>
  </platform>
  <preference name="webviewbounce" value="false"/>
  <preference name="UIWebViewBounce" value="false"/>
  <preference name="DisallowOverscroll" value="true"/>
  <preference name="android-minSdkVersion" value="16"/>
  <preference name="BackupWebStorage" value="none"/>
  <preference name="SplashScreenDelay" value="0"/>
  <preference name="FadeSplashScreen" value="false"/>
  <preference name="FadeSplashScreenDuration" value="0"/>
  <preference name="SplashScreenBackgroundColor" value="0xFFFFFFFF"/>
  <feature name="StatusBar">
    <param name="ios-package" onload="true" value="CDVStatusBar"/>
  </feature>
  <plugin name="cordova-plugin-facebook4" spec="~1.7.4">
    <variable name="APP_ID" value="99999999999"/>
    <variable name="APP_NAME" value="xxx"/>
  </plugin>
</widget>

Answer 1

In your index.html, I assume that you already have Content-Security-Policy .
Try replacing it with the following one.

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