PhoneGap “Failed to load resource: the server resp

2020-01-29 17:18发布

站内问答 / 移动开发
1753 3 4

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="support@phonegap.com">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)

3条回答
Juvenile、少年°
2楼-- · 2020-01-29 17:48

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 cordova-android@4.0.0 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

查看更多
0人赞 添加讨论(0) 举报
做个烂人
3楼-- · 2020-01-29 17:58

Using the Desktop App and PhoneGap Build I was having the same problem.

The issue was that index.html and config.xml were not in the root when first created in Desktop App. This is required according to http://docs.build.phonegap.com/en_US/introduction_getting_started.md.html.

Because they were in different folders, no configuration and no whitelist was loaded into the app resulting in a bunch of 404's.

To fix, I just moved config.xml into the same root directory as index.html and rebuilt on PhoneGap Build.

查看更多
0人赞 添加讨论(0) 举报
萌系小妹纸
4楼-- · 2020-01-29 17:59

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
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)