Question

我刚开始学习离子框架和角度js来开发一个Android应用程序。我想写APOD观众（=当天的天文图片）。

我打电话给：https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY&hd=true

返回一个JSON字符串。然后我查看图片（来自＆＃34; hdurl＆＃34;字段）。

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

这是我的代码：

<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl">
  <div class="form-group">
    <input class="form-control" type="date" ng-model="player.dob" placeholder="DD/MM/YYYY" />
  </div>
  <hr>
  <div ng-if="player.dob" ng-bind="player.dob | ageFilter"></div>
</body>

</html>

我没有得到与图像有关的错误。它只是告诉我我的loading.gif。

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

$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);
});

到我的config.xml。

我也尝试在ionic.project文件中添加代理：

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

我也尝试了很多不同的组合如何调用$ http。（f.e。"proxies": [ { "path": "/planetary/apod", "proxyUrl": "https://api.nasa.gov/planetary/apod" } ]或$http.get().success().error()或普通$http.get().then()）。结果相同。

任何想法？感谢。

Answer 1

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

cordova plugin add cordova-plugin-whitelist --save

这将在您的Android设备中启用http请求。并检查您的Android AndroidManifest.xml.It需要此权限

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

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

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

然后您的http请求将正常运行，谢谢。

Answer 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页面中。

通过$ http加载JSON。在浏览器中工作但不在Android（设备或仿真器）上工作

2 个答案: