将$ .getJSON与PhoneGap构建工作吗？ [英] Will $.getJSON work with PhoneGap build?

问题描述

有没有人能够在他们的PhoneGap构建中工作？ ：

  $（function（）{
 $ .getJSON（http://reddit.com/.json ，function（data）{
 alert（Success！）; 
}）
}）
  

它在浏览器中正常工作，但是当我构建应用程序它不运行。

我已经添加这些到我的配置.xml已将所有网域列入白名单

 < allow-navigation href =http：// * / */> 
< allow-navigation href =https：// * / */> 
< allow-navigation href =data：*/> 
< allow-navigation href =*/> 
< access origin =*/> 
< allow-intent href =*/> 
 

也尝试使用此CSP构建，而不使用

 < meta http-equiv =Content-Security-Policycontent =default-src'self'data：gap：https://ssl.gstatic.com; style -src'self''unsafe-inline'; media-src *> 
  

这是我从这里得到的： https://github.com/apache/cordova-plugin-whitelist

解决方案

我看了一下，在我自己的PhoneGap Build项目中复制了Ajax请求。

我注意到你使用的URL < a href =http://reddit.com/.json =nofollow> http://reddit.com/.json 似乎在Android设备上重定向至少 https://www.reddit.com/.json

我发现这是通过做一个PhoneGap构建与调试打开，运行在连接的Chrome远程调试工具的Nexus 7上的.apk，并在JS控制台中看到这一点：

拒绝连接到 https://www.reddit.com/.json ，因为它违反了以下内容安全策略...

我通过修改index.html中的内容安全策略元标记来修复此问题，同时包含 https://www.reddit.com 和 http： //reddit.com 在connect-src子句中。使用此CSP重新构建PhoneGap Build，现在可以在Nexus 7上正常工作：

 < meta http-equiv = -Security-Policycontent =default-src'self'data：gap：https://ssl.gstatic.com'unsafe-eval'; style-src'self''unsafe-inline'; media-src *; connect-src http://reddit.com https://www.reddit.com> 
  

所以我的PhoneGap应用程序现在看起来像这样工作：

  var app = {
 initialize：function（）{
 document.addEventListener（'deviceready'，this.onDeviceReady，false）; 
}，
 
 onDeviceReady：function（）{
 var parentElement = document.getElementById（'deviceready'）; 
 var listeningElement = parentElement.querySelector（'。listening'）; 
 var receivedElement = parentElement.querySelector（'。received'）; 
 
 listeningElement.setAttribute（'style'，'display：none;'）; 
 receivedElement.setAttribute（'style'，'display：block;'）; 
 
 $ .getJSON（'http://reddit.com/.json'，function（data）{
 alert（'Success  -  got'+ data.data.children.length + 'children in JSON'）; 
}）; 
} 
}; 
 
 app.initialize（）;为了方便起见，我把一个完整的应用程序准备好了在一个Github仓库中的PhoneGap Build   https://github.com/simonprickett/pgbuilddemorel =nofollow>此处。随时可以根据需要使用。
 
Is anyone able to get this to work in their PhoneGap build? :  
$(function(){
    $.getJSON("http://reddit.com/.json", function(data){
        alert("Success!");
    })
})
It works fine in browsers but when I build the app it doesn't run.

I've added these to my config.xml already to whitelist all domains
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />
<allow-navigation href="data:*" />
<allow-navigation href="*" />
<access origin="*" />
<allow-intent href="*" />
Also tried building it with this CSP and without
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *">
which I got from here: https://github.com/apache/cordova-plugin-whitelist
解决方案
I took a look at this and replicated your Ajax request in my own PhoneGap Build project.

What I noticed was that the URL you are using http://reddit.com/.json seems to get redirected on Android devices at least to https://www.reddit.com/.json

I discovered this by doing a PhoneGap Build build with debug turned on, running the .apk on a Nexus 7 with Chrome remote debugger tools attached, and seeing this in the JS Console:

"Refused to connect to 'https://www.reddit.com/.json' because it violates the following Content Security Policy..."

I fixed this by amending the Content Security Policy meta tag in index.html to include both https://www.reddit.com and http://reddit.com in the connect-src clause.  Rebuilt on PhoneGap Build using this CSP and it works fine on the Nexus 7 now:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; connect-src http://reddit.com https://www.reddit.com">
So my PhoneGap application now looks like this and works:
var app = {
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },

    onDeviceReady: function() {
        var parentElement = document.getElementById('deviceready');
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        $.getJSON('http://reddit.com/.json', function(data){
            alert('Success - got ' + data.data.children.length + ' children in JSON');
        });
    }
};

app.initialize();
For your convenience I put the complete app ready for PhoneGap Build in a Github repo here.  Feel free to use this as you need.

                        
这篇关于将$ .getJSON与PhoneGap构建工作吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！