Ionic - no internet connection

2019-02-20 03:23发布

问题:

We are building a android application using Ionic (+Cordova).

It all works in my browser, but when I build it and run the .apk this happens:

External images won't appear, and embeded google maps remain empty. The following code at our index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="js/ng-cordova.min.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
</head>
<body ng-app="starter">

    <ion-pane>
          <ion-header-bar class="bar-stable">

          </ion-header-bar>
          <ion-content>
            <div class="main" role="main">

                <p id="geolocation">Finding geolocation...</p>
                <img src="http://placehold.it/350x150.png" alt="no image" />

                <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d635472.0298105411!2d5.1189025!3d51.525825749999996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1snl!2snl!4v1432033961557" width="600" height="450" frameborder="0" style="border:0"></iframe>
            </div>
          </ion-content>
    </ion-pane>
</body>
</html>

In the config.xml we've created the following lines just after the closing tag of :

<allow-navigation href="*" />
<allow-intent href="*" />

回答1:

Check your manifest to allow your app to use internet.

<uses-permission android:name="android.permission.INTERNET" /> 

If you are using cordova 5 (Android platform version 4.0.0) then you should include the whitelist plugin and also the new content security policy meta tag to allow google maps api to load like this (on the top of your html file along with the rest meta tags):

<meta http-equiv="Content-Security-Policy" content="default-src *;
 style-src 'self' 'unsafe-inline' http://fonts.googleapis.com/;
script-src 'self' 'unsafe-inline' 'unsafe-eval' http://*.googleapis.com
 http://maps.gstatic.com;">

EDIT: Check also your config.xml what access you give:

<access origin="*" />

for instance to allow all connections

If it doesn't work please check your logs and post any errors.