Question

我尝试从外部JSON文件加载一些数据，但我不知道原因，但我的代码无法正常工作。

$(document).ready(function(){

    var urlDesc = "http://www.thisurl.com/worksgood/json.php";
    $.ajax({
        type: "GET",
        dataType: "json",
        url: urlDesc,
        success: function(data){
            $.each(data, function(i,item){
                alert(item);
            });
        },
        error: function(){
            alert(urlDesc);
            alert('There was an error loading the data.');
        }
    }); 
});

json.php会返回如下内容：

[{
    "color": "red",
    "size": "big"
  }, {
    "color": "white",
    "size": "small" 
}]

Answer 1

您是否在模拟器或设备上运行应用程序时检查了Javascript控制台？如果使用Cordova 5或更高版本，则可能需要在index.html中配置Content Security Policy元标记以允许访问您的服务器URL。如果使用iOS 9，您还需要配置App Transport Security例外，因为默认情况下iOS 9不允许非SSL连接。

如果您遇到这些问题，使用Safari或Chrome远程调试器应在JavaScript控制台中显示相应的错误，如下所示：

Refused to connect to '<your server url>' because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

要解决此问题，您需要在index.html的头部添加一个内容安全策略元标记，如下所示：

<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://www.thisurl.com">

如果您还在iOS 9上运行，则需要修改应用程序的-Info.plist以配置App Transport Security异常，以允许您的应用程序连接到您的服务器而无需SSL。将这样的内容添加到-Info.plist：

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSExceptionDomains</key>
  <dict>
      <key>www.thisurl.com</key>
      <dict>
        <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
        <true/>
    </dict>
  </dict>
</dict>

有一个detailed blog post解释了如何为Cordova配置后端安全性，指向一个示例应用，向您展示如何在iOS和Android上运行。

此外，在Cordova / PhoneGap引发“deviceready”事件（documentation）之前，请不要进行Ajax调用。

在Cordova / Phonegap

1 个答案: