PhoneGap "Failed to load resource: the server responded with a status of 404 (Not Found)"
For those having this problem while using Phonegap 6.3.1, you should whitelist the urls properly and use the cordova-plugin-inappbrowser plugin.
Read on for how to do this.
First, ensure you have whitelisted the urls you want to open. You do this by adding them to the hrefs of <access> tags, <allow-intent> tags and allow-navigation tags in your config.xml file at the root of the project. You need all three tags. Something like the following:
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.phonegap.helloworld" version="1.0.0"
xmlns="http://www.w3.org/ns/widgets"
xmlns:gap="http://phonegap.com/ns/1.0">
...
<access origin="*" />
<allow-intent href="*" />
<allow-navigation href="*" />
...
</widget>
(Note: the "*" in the above hrefs allows the opening of any url/path. In production, you probably want to restrict to certain urls/paths)
Next, in your index.html file, add the following javascript:
<script type="text/javascript">
document.addEventListener('deviceready', function() {
var url = 'https://www.google.com' // change to whatever you want
cordova.InAppBrowser.open(url, '_self', 'location=no');
}, false)
</script>
This script uses the cordova-plugin-inappbrowser plugin, which, if you generated your application using the standard Phonegap template, should already be included in your config.xml file.
The script waits for the device to be ready, then uses the cordova-plugin-inappbrowser plugin to open the given url. The '_self' parameter means it opens the page in the Phonegap webview and the 'location=no' means that there will be no address bar. For other parameter options see the documentation for the cordova-plugin-inappbrowser plugin (link above).
Finally, to test the application in the appropriate emulators (assuming you have the Phonegap CLI installed), run the following command(s):
phonegap run ios --verbose --stack-trace
phonegap run android --verbose --stack-trace
Talula
Updated on June 04, 2022Comments
-
Talula almost 2 years
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.comin 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.xmlis 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-pluginand that adding aContent-Security-Policymeta 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)