PhoneGap AJAX呼叫不工作 - 2015年12月

时间:2015-12-30 21:29:46

标签: javascript jquery ajax cordova phonegap-build

Cross贴在这里:http://community.phonegap.com/nitobi/topics/jquery-ajax-calls-all-of-the-sudden-do-not-work

这是过去一两周内的一个全新的错误。基本上,我在PhoneGap的index.html文件的头部有一个ajax调用,错误输出状态代码为0.这是从这个日期(2015年12月30日)起大约2周前的工作,突然不工作我还确认所有AJAX调用都不起作用。

我尝试了很多解决方案,但没有任何工作。

我试过了:

  • meta http-equiv =" Content-Security-Policy" content =" default-src *; style-src *' self' '不安全直插' '不安全-EVAL&#39 ;; script-src *' self' '不安全直插' '不安全-EVAL&#39 ;;">

  • 添加$ .support.cors = true;

  • 添加了标题集Access-Control-Allow-Origin" *"到服务器上的htaccess文件

  • 尝试了不同版本的白名单插件。

  • 尝试了不同形式的访问源设置。

  • 尝试将内联JS从index.html移到单独的JS文件中。

  • 已验证该行代码在localhost和通过Chrome从其他网络服务器上运行。

请帮忙。

这是我的config.xml:

<?xml version="1.0" encoding="UTF-8" ?>
    <widget xmlns   = "http://www.w3.org/ns/widgets"
        xmlns:gap   = "http://phonegap.com/ns/1.0"
        id          = "xxxxxx"
        version     = "1.0.0" >

    <name>Test</name>
    <description>xxxx</description>
    <author href="xxxx" email="xxxx">xxxx</author>

    <!-- basic config -->

    <preference name='phonegap-version' value='cli-5.2.0' />
    <preference name="android-build-tool" value="ant" />

    <preference name="orientation"                value="portrait" />
    <!-- all: default means both landscape and portrait are enabled -->
    <preference name="fullscreen"                 value="false" />
    <!-- all: hides the status bar at the top of the screen -->
    <preference name="target-device"              value="universal" />
    <!-- ios: possible values handset, tablet, or universal -->
    <preference name="prerendered-icon"           value="true" />
    <!-- ios: if icon is prerendered, iOS will not apply it's gloss to the app's icon on the user's home screen -->
    <preference name="ios-statusbarstyle"         value="black-opaque" />
    <!-- ios: black-translucent will appear black because the PhoneGap webview doesn't go beneath the status bar -->
    <preference name="detect-data-types"          value="true" />
    <!-- ios: controls whether data types (such as phone no. and dates) are automatically turned into links by the system -->
    <preference name="exit-on-suspend"            value="false" />
    <!-- ios: if set to false, the splash screen must be hidden using a JavaScript API -->
    <preference name="disable-cursor"             value="false" />
    <!-- blackberry: prevents a mouse-icon/cursor from being displayed on the app -->


    <!-- START Splash Screen Config -->


    <!--<preference name="auto-hide-splash-screen" value="false" />
    <preference name="SplashScreenDelay" value="500000" />-->

    <gap:splash src="splash.png" />

    <!-- iPhone and iPod touch -->
    <gap:splash src="img/splash/Default.png" gap:platform="ios" width="320" height="480" />
    <gap:splash src="img/splash/Default@2x.png" gap:platform="ios" width="640" height="960" />

    <!-- iPhone 5 / iPod Touch (5th Generation) -->
    <gap:splash src="img/splash/Default-568h@2x.png" gap:platform="ios" width="640" height="1136" />

    <!-- iPhone 6 -->
    <gap:splash src="img/splash/Default-667h@2x.png" gap:platform="ios" width="750" height="1334" />
    <gap:splash src="img/splash/Default-Portrait-736h@3x.png" gap:platform="ios" width="1242" height="2208" />
    <gap:splash src="img/splash/Default-Landscape-736h@3x.png" gap:platform="ios" width="2208" height="1242" />

    <!-- iPad -->
    <gap:splash src="img/splash/Default-Portrait.png" gap:platform="ios" width="768" height="1024" />
    <gap:splash src="img/splash/Default-Landscape.png" gap:platform="ios" width="1024" height="768" />

    <!-- Retina iPad -->
    <gap:splash src="img/splash/Default-Portrait@2x.png" gap:platform="ios" width="1536" height="2048" />
    <gap:splash src="img/splash/Default-Landscape@2x.png" gap:platform="ios" width="2048" height="1536" />

    <!-- Android -->
    <gap:splash src="img/splash/port-ldpi.png" gap:platform="android" gap:qualifier="port-ldpi" />
    <gap:splash src="img/splash/land-ldpi.png" gap:platform="android" gap:qualifier="land-ldpi" />
    <gap:splash src="img/splash/port-mdpi.png" gap:platform="android" gap:qualifier="port-mdpi" />
    <gap:splash src="img/splash/land-mdpi.png" gap:platform="android" gap:qualifier="land-mdpi" />
    <gap:splash src="img/splash/port-hdpi.png" gap:platform="android" gap:qualifier="port-hdpi" />
    <gap:splash src="img/splash/land-hdpi.png" gap:platform="android" gap:qualifier="land-hdpi" />
    <gap:splash src="img/splash/port-xhdpi.png" gap:platform="android" gap:qualifier="port-xhdpi" />
    <gap:splash src="img/splash/land-xhdpi.png" gap:platform="android" gap:qualifier="land-xhdpi" />


    <!-- END Splash Screen Config -->

    <!-- allow background music play iOS -->
    <gap:config-file platform="ios" parent="UIBackgroundModes" overwrite="true">
      <array>    
             <string>audio</string>
      </array>
    </gap:config-file>

    <!-- enable permissions -->
    <preference name="permissions" value="none"/>
    <feature name="http://api.phonegap.com/1.0/file"/>
    <feature name="http://api.phonegap.com/1.0/geolocation"/>
    <feature name="http://api.phonegap.com/1.0/media"/>
    <feature name="http://api.phonegap.com/1.0/network"/>
    <feature name="http://api.phonegap.com/1.0/notification"/>

    <!-- Plugins -->
    <!--<plugin name="InAppBrowser" value="CDVInAppBrowser" />
    <feature name="InAppBrowser">
        <param name="ios-package" value="CDVInAppBrowser" />
    </feature>-->

    <!-- Core plugins -->
    <!--<gap:plugin name="org.apache.cordova.battery-status" />
    <gap:plugin name="org.apache.cordova.camera" />
    <gap:plugin name="org.apache.cordova.media-capture" />
    <gap:plugin name="org.apache.cordova.console" />
    <gap:plugin name="org.apache.cordova.contacts" />
    <gap:plugin name="org.apache.cordova.device-motion" />
    <gap:plugin name="org.apache.cordova.device-orientation" />
    <gap:plugin name="org.apache.cordova.dialogs" />
    <gap:plugin name="org.apache.cordova.file-transfer" />
    <gap:plugin name="org.apache.cordova.geolocation" />
    <gap:plugin name="org.apache.cordova.globalization" />
    <gap:plugin name="org.apache.cordova.inappbrowser" />
    <gap:plugin name="org.apache.cordova.network-information" />
    <gap:plugin name="org.apache.cordova.vibration" />-->

    <gap:plugin name="cordova-plugin-device" source="npm"/>
    <gap:plugin name="cordova-plugin-file" source="npm"/>
    <gap:plugin name="cordova-plugin-media" source="npm"/>
    <gap:plugin name="cordova-plugin-splashscreen" source="npm"/>
    <gap:plugin name="cordova-plugin-whitelist" source="npm"/>
    <gap:plugin name="cordova-plugin-x-socialsharing" source="npm"/>
    <gap:plugin name="cordova-plugin-admobpro" source="npm" spec="2.9.6"/>
    <!--<gap:plugin name="de.appplant.cordova.plugin.local-notification"/>-->

    <!-- Third party plugins -->
    <!-- A list of available plugins are available at https://build.phonegap.com/plugins -->
    <!--
    <gap:plugin name="com.phonegap.plugins.barcodescanner" />
    -->

    <!-- Define app icon for each platform. -->
    <!--<icon src="icon.png" />
    <icon src="res/icon/android/icon-36-ldpi.png"   gap:platform="android"    gap:density="ldpi" />
    <icon src="res/icon/android/icon-48-mdpi.png"   gap:platform="android"    gap:density="mdpi" />
    <icon src="res/icon/android/icon-72-hdpi.png"   gap:platform="android"    gap:density="hdpi" />
    <icon src="res/icon/android/icon-96-xhdpi.png"  gap:platform="android"    gap:density="xhdpi" />
    <icon src="res/icon/blackberry/icon-80.png"     gap:platform="blackberry" />
    <icon src="res/icon/blackberry/icon-80.png"     gap:platform="blackberry" gap:state="hover"/>
    <icon src="res/icon/ios/icon-57.png"            gap:platform="ios"        width="57" height="57" />
    <icon src="res/icon/ios/icon-72.png"            gap:platform="ios"        width="72" height="72" />
    <icon src="res/icon/ios/icon-57-2x.png"         gap:platform="ios"        width="114" height="114" />
    <icon src="res/icon/ios/icon-72-2x.png"         gap:platform="ios"        width="144" height="144" />
    <icon src="res/icon/webos/icon-64.png"          gap:platform="webos" />
    <icon src="res/icon/windows-phone/icon-48.png"  gap:platform="winphone" />
    <icon src="res/icon/windows-phone/icon-173.png" gap:platform="winphone"   gap:role="background" />-->
    <icon src="img/icons/apple-touch-icon.png" />
    <icon src="img/icons/apple-touch-icon-57x57-precomposed.png" gap:platform="ios" width="57" height="57"/>
    <icon src="img/icons/apple-touch-icon-72x72-precomposed.png" gap:platform="ios" width="72" height="72"/>
    <icon src="img/icons/apple-touch-icon-114x114-precomposed.png" gap:platform="ios" width="114" height="114"/>
    <icon src="img/icons/apple-touch-icon-144x144-precomposed.png" gap:platform="ios" width="144" height="144"/>
    <icon src="img/icons/apple-touch-icon-120x120-precomposed.png" gap:platform="ios" width="120" height="120"/>
    <icon src="img/icons/apple-touch-icon-76x76-precomposed.png" gap:platform="ios" width="76" height="76"/>
    <icon src="img/icons/apple-touch-icon-152x152-precomposed.png" gap:platform="ios" width="152" height="152"/>

    <!-- Define app splash screen for each platform. -->
    <!--  <gap:splash src="res/screen/android/screen-ldpi-portrait.png"  gap:platform="android" gap:density="ldpi" />
    <gap:splash src="res/screen/android/screen-mdpi-portrait.png"  gap:platform="android" gap:density="mdpi" />
    <gap:splash src="res/screen/android/screen-hdpi-portrait.png"  gap:platform="android" gap:density="hdpi" />
    <gap:splash src="res/screen/android/screen-xhdpi-portrait.png" gap:platform="android" gap:density="xhdpi" />
    <gap:splash src="res/screen/blackberry/screen-225.png"         gap:platform="blackberry" />
    <gap:splash src="res/screen/ios/screen-iphone-portrait.png"    gap:platform="ios"     width="320" height="480" />
    <gap:splash src="res/screen/ios/screen-iphone-portrait-2x.png" gap:platform="ios"     width="640" height="960" />
    <gap:splash src="res/screen/ios/screen-ipad-portrait.png"      gap:platform="ios"     width="768" height="1024" />
    <gap:splash src="res/screen/ios/screen-ipad-landscape.png"     gap:platform="ios"     width="1024" height="768" />
    <gap:splash src="res/screen/windows-phone/screen-portrait.jpg" gap:platform="winphone" />-->

    <!--
    Define access to external domains.

    <access />            - a blank access tag denies access to all external resources.
    <access origin="*" /> - a wildcard access tag allows access to all external resource.

    Otherwise, you can specify specific domains:
    -->
    <allow-navigation href="*"/>
    <allow-intent href="*"/>
    <access origin="*"/>
    <access origin="http://*.xxxxxxx/"/>
    <access origin="http://xxxxxx/"/>
    <!-- allow local pages -->
    <!--
    <access origin="http://phonegap.com" />                    - allow any secure requests to http://phonegap.com/
    <access origin="http://phonegap.com" subdomains="true" />  - same as above, but including subdomains, such as http://build.phonegap.com/
    -->

</widget>

这是通过AJAX抓取页面的脚本:

<script>
        var dev_mode = true;

        if (dev_mode) {
            alert('Development Mode Active - You will see popups used for debugging purposes.');
            var scripts_url = 'http://dev.xxxxxxx/app/scripts';
        } else {
            var scripts_url = 'http://xxxxxxxxx/app/scripts';
        }

        jQuery.ajax({
            type : "POST",
            url : scripts_url,
            success: function(html) {
                jQuery('head').append(html);
            },
            error: function(xhr, status, err) {
                if (dev_mode) {
                    alert('error getting scripts: ' + status);
                    alert('error getting scripts: ' + err);
                    alert('error getting scripts: ' + xhr.responseText);
                    alert('error getting scripts: ' + xhr.status);
                    alert('error getting scripts: ' + xhr.statusText);
                    alert('error getting scripts: ' + JSON.stringify(xhr));
                }
            }
        });
    </script>

AJAX调用错误状态为0。

数目:

这是你的第一个应用吗?

不是我的第一个PhoneGap应用,但我的第一个非常复杂。

您的目标平台及其目标版本是什么?

针对除Blackberry之外的所有平台(在此AJAX错误之前在iOS,Android和WP上测试过)

您使用的是CLI,SDK还是Build?

构建

2 个答案:

答案 0 :(得分:0)

不确定它是否对您的问题有帮助,但对于其他有类似问题的人来说,这可能会有所帮助:

几周前,我有完全相同的问题。 我的解决方案是将以下内容添加到我的服务器:

"Access-Control-Allow-Origin", "*";

"Access-Control-Allow-Headers", "X-Requested-With"

"Access-Control-Allow-Credentials", "X-Requested-With"

当我使用Express(NODE)服务器时,我通过添加cors NPM包来做。 然后,在服务器启动之前添加它:

app.use(cors({credentials: true, origin: true}));

答案 1 :(得分:0)

全部注意:此应用使用不受限制的白名单过滤器,仅用于开发。
这个APP示例是不安全的。由您来保护您的APP。
 此外,您的应用可能会被Google和Apple拒绝。

感谢大家的帮助,我很高兴地宣布我已经解决了这个问题。我不是100%肯定解决了这个问题的原因,因为我尝试了很多解决方案而且我怀疑这是一点点的一切。但是,我第一次注意到代码实际工作的时候是我删除了config.xml中的权限行。

总之,为了解决这个问题,我补充道:

  • CSP <meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  • 从config.xml中删除了权限和功能。 (下面的新配置)
  • 在触发AJAX调用之前等待deviceready事件

新Config.XML:

    <?xml version="1.0" encoding="UTF-8" ?>
    <widget xmlns   = "http://www.w3.org/ns/widgets"
        xmlns:gap   = "http://phonegap.com/ns/1.0"
        id          = "abc"
        version     = "1.0.0" >

    <name>abc</name>
    <description>abc</description>
    <author href="abc" email="abc">abc</author>

    <!-- basic config -->

    <preference name='phonegap-version' value='cli-5.2.0' />
    <preference name="android-build-tool" value="ant" />

    <preference name="orientation"                value="portrait" />
    <!-- all: default means both landscape and portrait are enabled -->
    <preference name="fullscreen"                 value="false" />
    <!-- all: hides the status bar at the top of the screen -->
    <preference name="target-device"              value="universal" />
    <!-- ios: possible values handset, tablet, or universal -->
    <preference name="prerendered-icon"           value="true" />
    <!-- ios: if icon is prerendered, iOS will not apply it's gloss to the app's icon on the user's home screen -->
    <preference name="ios-statusbarstyle"         value="black-opaque" />
    <!-- ios: black-translucent will appear black because the PhoneGap webview doesn't go beneath the status bar -->
    <preference name="detect-data-types"          value="true" />
    <!-- ios: controls whether data types (such as phone no. and dates) are automatically turned into links by the system -->
    <preference name="exit-on-suspend"            value="false" />
    <!-- ios: if set to false, the splash screen must be hidden using a JavaScript API -->
    <preference name="disable-cursor"             value="false" />
    <!-- blackberry: prevents a mouse-icon/cursor from being displayed on the app -->


    <!-- START Splash Screen Config -->


    <!--<preference name="auto-hide-splash-screen" value="false" />
    <preference name="SplashScreenDelay" value="500000" />-->

    <gap:splash src="splash.png" />

    <!-- iPhone and iPod touch -->
    <gap:splash src="img/splash/Default.png" gap:platform="ios" width="320" height="480" />
    <gap:splash src="img/splash/Default@2x.png" gap:platform="ios" width="640" height="960" />

    <!-- iPhone 5 / iPod Touch (5th Generation) -->
    <gap:splash src="img/splash/Default-568h@2x.png" gap:platform="ios" width="640" height="1136" />

    <!-- iPhone 6 -->
    <gap:splash src="img/splash/Default-667h@2x.png" gap:platform="ios" width="750" height="1334" />
    <gap:splash src="img/splash/Default-Portrait-736h@3x.png" gap:platform="ios" width="1242" height="2208" />
    <gap:splash src="img/splash/Default-Landscape-736h@3x.png" gap:platform="ios" width="2208" height="1242" />

    <!-- iPad -->
    <gap:splash src="img/splash/Default-Portrait.png" gap:platform="ios" width="768" height="1024" />
    <gap:splash src="img/splash/Default-Landscape.png" gap:platform="ios" width="1024" height="768" />

    <!-- Retina iPad -->
    <gap:splash src="img/splash/Default-Portrait@2x.png" gap:platform="ios" width="1536" height="2048" />
    <gap:splash src="img/splash/Default-Landscape@2x.png" gap:platform="ios" width="2048" height="1536" />

    <!-- Android -->
    <gap:splash src="img/splash/port-ldpi.png" gap:platform="android" gap:qualifier="port-ldpi" />
    <gap:splash src="img/splash/land-ldpi.png" gap:platform="android" gap:qualifier="land-ldpi" />
    <gap:splash src="img/splash/port-mdpi.png" gap:platform="android" gap:qualifier="port-mdpi" />
    <gap:splash src="img/splash/land-mdpi.png" gap:platform="android" gap:qualifier="land-mdpi" />
    <gap:splash src="img/splash/port-hdpi.png" gap:platform="android" gap:qualifier="port-hdpi" />
    <gap:splash src="img/splash/land-hdpi.png" gap:platform="android" gap:qualifier="land-hdpi" />
    <gap:splash src="img/splash/port-xhdpi.png" gap:platform="android" gap:qualifier="port-xhdpi" />
    <gap:splash src="img/splash/land-xhdpi.png" gap:platform="android" gap:qualifier="land-xhdpi" />


    <!-- END Splash Screen Config -->

    <!-- allow background music play iOS -->
    <gap:config-file platform="ios" parent="UIBackgroundModes" overwrite="true">
      <array>    
             <string>audio</string>
      </array>
    </gap:config-file>
<icon src="img/icons/apple-touch-icon.png" />
    <icon src="img/icons/apple-touch-icon-57x57-precomposed.png" gap:platform="ios" width="57" height="57"/>
    <icon src="img/icons/apple-touch-icon-72x72-precomposed.png" gap:platform="ios" width="72" height="72"/>
    <icon src="img/icons/apple-touch-icon-114x114-precomposed.png" gap:platform="ios" width="114" height="114"/>
    <icon src="img/icons/apple-touch-icon-144x144-precomposed.png" gap:platform="ios" width="144" height="144"/>
    <icon src="img/icons/apple-touch-icon-120x120-precomposed.png" gap:platform="ios" width="120" height="120"/>
    <icon src="img/icons/apple-touch-icon-76x76-precomposed.png" gap:platform="ios" width="76" height="76"/>
    <icon src="img/icons/apple-touch-icon-152x152-precomposed.png" gap:platform="ios" width="152" height="152"/>

    <gap:plugin name="cordova-plugin-device" source="npm"/>
    <gap:plugin name="cordova-plugin-file" source="npm"/>
    <gap:plugin name="cordova-plugin-media" source="npm"/>
    <gap:plugin name="cordova-plugin-splashscreen" source="npm"/>
    <gap:plugin name="cordova-plugin-whitelist" source="npm"/>
    <gap:plugin name="cordova-plugin-x-socialsharing" source="npm"/>
    <gap:plugin name="cordova-plugin-admobpro" source="npm" spec="2.9.6"/>

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

</widget>

新的JS AJAX调用:

document.addEventListener("deviceready", on_device_ready, false);
            function on_device_ready() {
                jQuery.ajax({
                    type : "GET",
                    url : scripts_url,
                    success: function(html) {
                        jQuery('head').append(html);
                    },
                    error: function(xhr, status, err) {
                        if (dev_mode) {
                            alert('error getting scripts: ' + status);
                            alert('error getting scripts: ' + err);
                            alert('error getting scripts: ' + xhr.responseText);
                            alert('error getting scripts: ' + xhr.status);
                            alert('error getting scripts: ' + xhr.statusText);
                            alert('error getting scripts: ' + JSON.stringify(xhr));
                        }
                    }
                });
            }

再次感谢大家。