PhoneGap 构建：AJAX 不工作答案

【问题标题】：PhoneGap Build: AJAX not workingPhoneGap 构建：AJAX 不工作
【发布时间】：2016-07-07 16:56:54
【问题描述】：

我一直在尝试制作一个可以进行 AJAX 调用的小测试应用程序。当我使用 PhoneGap 桌面服务器和 Android 开发者应用程序运行它时。一切正常。但是当我使用 PhoneGap Build 编译应用程序时，将 .apk 安装在我的手机上。 AJAX 调用失败。

我已通读一遍，试图找到解决问题的方法。好像有很多人也有这个问题，但到目前为止我还没有解决它。我看到人们说的最常见的事情是这是一个白名单问题。但是我的 config.xml 文件包含...

<plugin name="cordova-plugin-whitelist" source="npm" spec="~1.2.1"/>

还有……

<access origin="*"/>
<allow-intent href="http://*/*"/>
<allow-intent href="https://*/*"/>

我的 CSP 看起来像这样......

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

根据Cordova documentation 应该允许AJAX。

我的应用程序非常简单。它有一个按钮，可以调用我的 AJAX 函数并将其传递一些信息以发送到服务器，以及一个回调函数...

<button onclick="serv('init',ajaxer)">BUTTON</button>

这是我的 js 文件：

function ajaxer(resp){
    var e = document.getElementById("test");
    e.innerHTML="responded...";

    if(resp.go){
        e.innerHTML="IT WORKED!";
    }else{
        e.innerHTML="foo";
    }
}

function serv(request,returnFunc,parameters) { //SEND AND RECEIVE ALL SERVER INFO
    document.getElementById("test").innerHTML="sending info...";    

    var query="";
    var serverObject;
    if(window.XMLHttpRequest){
        serverObject = new XMLHttpRequest();
    }else{
        serverObject = new ActiveXObject("Microsoft.XMLHTTP");
    }
    serverObject.goto = returnFunc;

    serverObject.onreadystatechange = function() {
        if(serverObject.readyState==4&&serverObject.status==200){
            var serverResponse = JSON.parse(serverObject.responseText);
            serverObject.goto(serverResponse);
        }
    };

    if(parameters){
        query="&"+parameters;
    }

    serverObject.open("POST", "http://tylermackenzie.duckdns.org/phoneGap%20Test/server.php", true);
    serverObject.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    serverObject.send('qType='+request+query);
}

当我按下按钮时，它会显示文本“正在发送信息...”，但从未将其切换为“已响应...”或“它成功了！”或“富”。这意味着 ajaxer() 从未被调用过。

我不明白为什么它不起作用。就像我之前提到的。当我使用 phoneGap 开发者应用程序时，它工作得很好。而且我在测试时关闭了手机wifi。所以我知道手机与服务器在不同的网络上，因为手机必须使用移动网络。如果这只是一个白名单问题，那我用开发者应用测试的时候不应该有同样的问题吗？

另外，我知道这不是我的服务器的问题，因为当我在开发者应用上进行测试以及手动导航时它响应良好。

希望有人能帮帮我。

添加

这可能与我上传到 PhoneGap Build 的文件结构有关吗？我刚刚使用了 PhoneGap 桌面应用程序创建的“hello world”基本应用程序。并编辑了 html 和 js 以创建一个小测试应用程序。

这让我有点困惑，因为在 AppName/www 以及 AppName/platforms/browser 和 AppName/platforms/browser/www 下都有一个 index.html 为什么所有文件都增加了三倍？我试着让所有三个副本都一样。好像没什么区别。

我在某处读到，我只需要将 AppName/www 文件夹上传到 PhoneGap Build，它似乎与上传其他所有内容一样好。

【问题讨论】：

@Homen 白名单是 1.2.2，android 是 6.0
@Homen 啊，对不起。它说“找不到命令”我假设是因为我从未安装过 CLI 对吗？如果我使用 PhoneGap Build，我真的不需要它吗？
我们最近遇到了类似的问题。如果我们“签署”APK，它将不再获得网络访问权限。如果我们不签署 APK，并且其他一切都相同，则应用程序可以正常工作。相同的应用程序也可以在 IOS 上签名和未签名（网络连接）。尝试在 phonegap build 上构建您的应用程序而不签署它以克服这个障碍。我仍在试图找出根本原因。
@DaShaun 当您说“签名”时，您的意思是为构建创建一个密钥，对吗？我从来没有为构建创建过密钥，所以这似乎是一个稍微不同的问题
解决了我的问题！当包被“签名”（使用密钥）时，它是“发布”构建而不是“调试”构建。发布版本强制执行 https/ssl 证书，我们遇到了证书链接问题。所以这些调用甚至没有出现在我们的日志中，但这并不是因为它们没有发出，而是因为 android/signed.apk 拒绝连接到错误的证书链。

标签： javascript ajax cordova phonegap-build

【解决方案1】：

我推荐你使用 jQuery 来发出 ajax 请求，它更易于管理和维护，也更容易通过 jQuery 发出 ajax 请求

您还可以使用 weinre 远程调试器调试 phonegap 应用程序并查看 ajax 请求如何发送并返回到服务器和从服务器返回您可以按照以下教程中介绍的步骤进行操作 Weinre Remote Debugging Tutorial

希望我的回答对你有用

【讨论】：

刚刚尝试将应用程序切换到使用 jQuery。再次。当我使用 phonegap 开发人员应用程序在我的系统上测试它时，jQuery ajax 调用效果很好。但是当我使用phonegap Build时。我编译的应用程序的 ajax 调用失败。
如果我错了，请纠正我，但 Weinre 不是用于在我的 Web 应用程序编译之前对其进行调试吗？虽然它仍在浏览器中开发？而不是作为已安装的 APK 文件。如果这是真的，那么它对我没有多大好处，因为我的应用程序在预编译后工作得很好。只有在我安装了 APK 文件后它才会停止工作。
phonegap 应用程序是一个 web 视图，您仍然可以使用 weinre 对其进行调试，weinre 只是远程调试器，您可以在应用程序中注入 weinre 脚本文件对您的 PC 的引用，当应用程序打开时 weinre 服务器显示设备已连接您然后可以像在 chrome 上一样检查 ajax 请求和 html，但目标是您的应用程序，我已经对其进行了测试并且它可以工作。

【解决方案2】：

您是否尝试将 connect-src 部分添加到您的内容安全策略中？例如：

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; connect-src *">

这控制可以向何处发出 Ajax 请求，请参阅content-security-policy.com 上的文档

【讨论】：

是的，之前尝试过，然后再试一次，复制你的代码。还是什么都没有。