Question

我最近开始玩Ionic，我试图从OMDb API中提取数据。似乎CORS存在一些问题，我已经在http://blog.ionic.io/handling-cors-issues-in-ionic/阅读了指南，尝试添加proxyURL，但似乎无法正常工作或我遗漏了一些东西。

这是我想要做的事情：

.controller('MovieController', ['$scope', '$http', function($scope, $http) {
  $http.get('http://www.omdbapi.com/?s=Star+Wars').success(function(data) {
   $scope.movies = data;
 });
}]);

试图在这里显示电影数据：

  <ion-content ng-controller="MovieController" class="has-subheader">
    <ion-list>
      <ion-item ng-repeat='item in movies' class="item-left item-text-wrap">
        <img src="http://placehold.it/100x150" alt="Photo">
        <h2>{{ item.Title }}</h2>
        <h3>{{ item.Year }}</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </ion-item>
    </ion-list>
  </ion-content>

完整代码（除此之外不多）http://play.ionic.io/app/84f6a0092ffe

我在这里缺少什么？我的Ionic项目需要更改某些内容，或者我滥用OMDb API？非常感谢你提前。

Answer 1

好吧，我明白了。似乎我需要稍微不同地请求API。这是一个更新的工作代码。

angular.module('app', ['ionic'])

.controller('AppCtrl', function($scope, HttpService) {
  HttpService.getPost() 
    .then(function(response) {
      $scope.post = response;
    })
})

.service('HttpService', function($http) {
  return {
    getPost: function() {
      return $http.get('http://www.omdbapi.com/?t=Star+Wars')
      .then(function (response) {
        console.log('Get Post', response);
        return response.data;
      });
    }
  }
})

这只显示一个项目。删除视图中的ng-repeat。

编辑：这很奇怪。并不总是从OMDb Api获取。它现在说Cross-Origin Request Blocked。

使用Ionic与OMBd API？

1 个答案: