通过 $http 加载 JSON。适用于浏览器但不适用于 Android（设备或模拟器）答案

【问题标题】：Loading JSON via $http. Works in Browser but not on Android (Device or Emulator)通过 $http 加载 JSON。适用于浏览器但不适用于 Android（设备或模拟器）
【发布时间】：2016-07-17 14:38:23
【问题描述】：

我刚开始学习 ionic 框架和 Angular js 来开发一个 android 应用程序。我想写 APOD 查看器（=今日天文图片）。

我调用 api 到：https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY&hd=true

wich 返回一个 JSON 字符串。然后我查看图片（来自“hdurl”字段）。

当我在浏览器中尝试时，一切都按预期工作。但是当我构建应用程序并在模拟器或手机上运行它时，似乎我没有得到 $http() 调用的答案。

这是我的代码：

$scope.apodImgUrl = "img/loading.gif";
$scope.apiUrl = "https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY&hd=true";
$http({
  method: "GET",
  url: $scope.apiUrl
}).then(function (response){
  if(response == null) {
    showError($location, "No Data", "Received nothing!");
  }else{
    if(response.data.media_type == "image") {
      $scope.apodImgUrl = response.data.hdurl;
    }else{
      showError($location, "No Image", "Only Images are Supported (so far!)");
    }
  }
},function (errorResponse) {
  showError($location, "HTTP GET Error", errorResponse);
});

我没有收到图像错误。它只是显示我的 loading.gif。

我已经使用了cordova白名单插件并添加了：

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

到我的 config.xml。

我还尝试将代理添加到我的 ionic.project 文件中：

"proxies": [
  {
    "path": "/planetary/apod",
    "proxyUrl": "https://api.nasa.gov/planetary/apod"
  }
]

我也尝试了很多不同的组合如何调用 $http。（例如 $http.get().success().error() 或 $http.get().then() 或普通的 $http()）。结果相同。

有什么想法吗？谢谢。

【问题讨论】：

您是否尝试过使用Chrome inspect 调试您的应用程序？
嗨@Phonolog，谢谢你的回复，我今天晚上去试试。

标签： android angularjs cordova ionic-framework

【解决方案1】：

请在您的项目中添加白名单插件。

cordova plugin add cordova-plugin-whitelist --save

这将在您的 Android 设备中启用 http 请求。还要检查你的android AndroidManifest.xml。它需要这个权限

<uses-permission android:name="android.permission.INTERNET" />

最后在 config.xml 中添加这些行

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

那么你的http请求就可以正常工作了，谢谢。

【讨论】：

嗨，我在一个全新的项目上进行了尝试，它成功了。我分析了这些差异，结果发现我的 config.xml 文件中缺少 <plugin name="cordova-plugin-whitelist" spec="~1.2.2"/> 行。我添加了它并且它有效！好像ionic plugin add cordova-plugin-whitelist 没有添加它，而cordova plugin add cordova-plugin-whitelist --save 有。非常感谢！
#linluk 感谢兄弟的赞赏。

【解决方案2】：

我有同样的问题。添加白名单插件后，我的问题保持不变。最后我通过评论这一行 <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 *"> 解决了它。此行在 index.html 页面中。

【讨论】：