cordova - PhoneGap "Failed to load resource: the server responded with a status of 404 (Not Found)"

Question

I have a web application that I recently tried converting into PhoneGap, but for some reason, when running it on my android, it doesn't have access to the internet. When debugging with chrome via usb, I see the error "Failed to load resource: the server responded with a status of 404 (Not Found)" for all external requests (e.g. loading google fonts as stylesheets from fonts.googleapis.com in my html, and calling firebase from my js).

I'm using the default <access origin="*"/> directive, which, to my understanding, should allow full access.

My complete config.xml is bellow:

<widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" id="com.phonegap.helloworld" version="1.0.0">
  <name>MyApp</name>
  <description>MyDescription</description>
  <author href="http://phonegap.com" email="[email protected]">PhoneGap Team</author>
  <content src="index.html"/>
  <preference name="permissions" value="none"/>
  <preference name="orientation" value="default"/>
  <preference name="target-device" value="universal"/>
  <preference name="fullscreen" value="true"/>
  <preference name="webviewbounce" value="true"/>
  <preference name="prerendered-icon" value="true"/>
  <preference name="stay-in-webview" value="false"/>
  <preference name="ios-statusbarstyle" value="black-opaque"/>
  <preference name="detect-data-types" value="true"/>
  <preference name="exit-on-suspend" value="false"/>
  <preference name="show-splash-screen-spinner" value="true"/>
  <preference name="auto-hide-splash-screen" value="true"/>
  <preference name="disable-cursor" value="false"/>
  <preference name="android-minSdkVersion" value="14"/>
  <preference name="android-installLocation" value="auto"/>
  <gap:plugin name="org.apache.cordova.battery-status" source="npm"/>
  <gap:plugin name="org.apache.cordova.camera" source="npm"/>
  <gap:plugin name="org.apache.cordova.console" source="npm"/>
  <gap:plugin name="org.apache.cordova.contacts" source="npm"/>
  <gap:plugin name="org.apache.cordova.device" source="npm"/>
  <gap:plugin name="org.apache.cordova.device-motion" source="npm"/>
  <gap:plugin name="org.apache.cordova.device-orientation" source="npm"/>
  <gap:plugin name="org.apache.cordova.dialogs" source="npm"/>
  <gap:plugin name="org.apache.cordova.file" source="npm"/>
  <gap:plugin name="org.apache.cordova.file-transfer" source="npm"/>
  <gap:plugin name="org.apache.cordova.geolocation" source="npm"/>
  <gap:plugin name="org.apache.cordova.globalization" source="npm"/>
  <gap:plugin name="org.apache.cordova.inappbrowser" source="npm"/>
  <gap:plugin name="org.apache.cordova.media" source="npm"/>
  <gap:plugin name="org.apache.cordova.media-capture" source="npm"/>
  <gap:plugin name="org.apache.cordova.network-information" source="npm"/>
  <gap:plugin name="org.apache.cordova.splashscreen" source="npm"/>
  <gap:plugin name="org.apache.cordova.vibration" source="npm"/>
  <icon src="icon.png"/>
  <icon src="www/res/icon/android/icon-36-ldpi.png" gap:platform="android" gap:qualifier="ldpi"/>
  <icon src="www/res/icon/android/icon-48-mdpi.png" gap:platform="android" gap:qualifier="mdpi"/>
  <icon src="www/res/icon/android/icon-72-hdpi.png" gap:platform="android" gap:qualifier="hdpi"/>
  <icon src="www/res/icon/android/icon-96-xhdpi.png" gap:platform="android" gap:qualifier="xhdpi"/>
  <icon src="www/res/icon/blackberry/icon-80.png" gap:platform="blackberry"/>
  <icon src="www/res/icon/blackberry/icon-80.png" gap:platform="blackberry" gap:state="hover"/>
  <icon src="www/res/icon/ios/icon-57.png" gap:platform="ios" width="57" height="57"/>
  <icon src="www/res/icon/ios/icon-72.png" gap:platform="ios" width="72" height="72"/>
  <icon src="www/res/icon/ios/icon-57-2x.png" gap:platform="ios" width="114" height="114"/>
  <icon src="www/res/icon/ios/icon-72-2x.png" gap:platform="ios" width="144" height="144"/>
  <icon src="www/res/icon/webos/icon-64.png" gap:platform="webos"/>
  <icon src="www/res/icon/windows-phone/icon-48.png" gap:platform="winphone"/>
  <icon src="www/res/icon/windows-phone/icon-173-tile.png" gap:platform="winphone" gap:role="background"/>
  <gap:splash src="www/res/screen/android/screen-ldpi-portrait.png" gap:platform="android" gap:qualifier="port-ldpi"/>
  <gap:splash src="www/res/screen/android/screen-mdpi-portrait.png" gap:platform="android" gap:qualifier="port-mdpi"/>
  <gap:splash src="www/res/screen/android/screen-hdpi-portrait.png" gap:platform="android" gap:qualifier="port-hdpi"/>
  <gap:splash src="www/res/screen/android/screen-xhdpi-portrait.png" gap:platform="android" gap:qualifier="port-xhdpi"/>
  <gap:splash src="www/res/screen/blackberry/screen-225.png" gap:platform="blackberry"/>
  <gap:splash src="www/res/screen/ios/screen-iphone-portrait.png" gap:platform="ios" width="320" height="480"/>
  <gap:splash src="www/res/screen/ios/screen-iphone-portrait-2x.png" gap:platform="ios" width="640" height="960"/>
  <gap:splash src="www/res/screen/ios/screen-iphone-portrait-568h-2x.png" gap:platform="ios" width="640" height="1136"/>
  <gap:splash src="www/res/screen/ios/screen-ipad-portrait.png" gap:platform="ios" width="768" height="1024"/>
  <gap:splash src="www/res/screen/ios/screen-ipad-landscape.png" gap:platform="ios" width="1024" height="768"/>
  <gap:splash src="www/res/screen/windows-phone/screen-portrait.jpg" gap:platform="winphone"/>
  <access origin="*"/>
  <access uri="https://*.firebaseio.com" subdomains="true"/>
  <plugin name="cordova-plugin-whitelist" version="1"/>
  <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>
</widget>

I was looking at questions here which appear to be related, and they mentioned that the problem might have to do with the cordova-whitelist-plugin and that adding a Content-Security-Policy meta directive in my html could help, but I couldn't figure out how to do that.

EDIT: Here are some of the 404s I'm getting. The URLs work well from web version.

http://fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium Failed to load resource: the server responded with a status of 404 (Not Found)
https://fonts.googleapis.com/css?family=Quicksand:300,400,700 Failed to load resource: the server responded with a status of 404 (Not Found)
http://fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium Failed to load resource: the server responded with a status of 404 (Not Found)
http://debug1.build.phonegap.com/target/target-script-min.js#15bded38-647a-11e5-95fa-22000b96d1a7 Failed to load resource: the server responded with a status of 404 (Not Found)

Answer 1

It could be you do not have the version set for your phonegap compiler. Here is what you need to know.

From Top Mistakes by Developers new to Cordova/Phonegap you have hit:

• #6 Not setting the "phonegap version" for your compiler
• #7 Not setting "version" for you plugins
• #10 Not adding the new "white-list" and "white-list plugin" parameters in config.xml.

From the Phonegap Build Forum, Petra Adds:

I would add: without announcement, PGB changed the default PGB-version from 3.7.0 to cli-5.2.0. This causes all those who have not set 'phonegap-version' in config.xml to be confronted with the sudden need of splashscreen and whitelist plugins and additional whitelisting specifications in config and html.

Also, several plugins seem not to build correctly with cli-5.2.0, causing log file error messages about "Class ***.java".

For #6 & #7

With the CLI version, if you do not assign a version for your platform OR in ''Phonegap Build'' if you do not set the phonegap-version in config.xml, YOU WILL GET THE LATEST VERSION. If you are lucky, your program just works as expected. If you are not lucky, you'll get a set of cascading error.

Luckily for all of us, Holly Schinsky has written a nice blog post to explain it all:

Cordova/PhoneGap Version Confusion
http://devgirl.org/2014/11/07/cordovaphonegap-version-confusion/

For #10

This relatively * NEW * requirement means ? to access ANY website or resources on the web, you MUST use the whitelist and the whitelist plugin. This requirement goes into affect if you are using [email protected] or better; including cli-5.1.1. If however, your version is before 4.0.0, let use say 3.5.0 or 3.7.0, then you will not have to add the white-list requirement.

To be clear, the "whitelist" has been around for a bit, but the plugin and requirement is very new. As you would expect, when the "whitelist" was added, the defacto open-access feature was deprecated. Or said another way, the defacto open-access feature was planned and scheduled to be eliminated. This change marks a step in removal of the open-access feature.

In addition, the Content Security Policy (CSP) has caught numerous developers - because it was soooo poorly publicized. This CSP needs to go in every single HTML page you used, just like you have to wait for 'deviceready'. The documentation is buried in the bottom of many of the latest documentation pages.

Related Links

Phonegap Build Forum: Notes for upgrading to cli-5.1.1 on PGB and now required Whitelist

• Cordova Whitelist Guide
• Phonegap Whitelist Guide
• Phonegap Build Whitelist Guide