PhoneGap/Cordova compiled android app doesn't load external URIs
Question
I'm trying to make a simple geolocation app. The native geolocation works fine in that coordinates are coming in. I'm having a hard time loading a google map, like in the Simple Markers example here .
Turns out you have to whitelist external domains . No problem, I added the following to my config.xml (in root of the phonegap app):
<access origin="*" />
<access origin="*://*.googleapis.com/*" subdomains="true" />
<access origin="*://*.gstatic.com/*" subdomains="true" />
<access origin="*://*.google.com/*" subdomains="true" />
<access origin="*://*.googleusercontent.com/*" subdomains="true" />
Just in case, I added the same under <platform name="android"> . Then I removed it. Still, nothing.
I then made the app display a simple image; this is what the HTML part of the app looks like:
<body>
<span><img src="https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi_hdpi.png" alt="" /></span>
<div id="map"></div>
</body>
If I open this file in a browser, it's a-ok:
But when I compile the app and open it on my tablet, uh oh:
So it looks like the access permissions aren't correctly set. The image is broken, googleapis.com never loads and my map never sees the light of day.
Here is a pastebin of my root config.xml file.
Please help me figure out why the android app is refusing to load external urls in the context of PhoneGap/Cordova.
My bet is on some obscure permissions thing I do not know about. Been banging my head against a wall for a while now, would really appreciate some help. Thanks in advance.
1 answers
solution1
1 2016-05-04 13:19:02
Given that you've whitelisted * as an origin, you shouldn't even need the Google ones. Have you tried inspecting the app from Chrome? Go to chrome://inspect in your desktop browser, and you can inspect the app from there if the device is connected to your computer.
The console in the inspector should show any errors that your requests are making. I'm guessing that you have a Content Security Policy that's blocking the request. The latest version of the whitelist docs are at https://github.com/apache/cordova-plugin-whitelist . At the bottom of the readme you'll see a few samples for a Content Security Policy. I suggest adding the following to your index.html:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.