AngularJS - 調用Flickr API失敗並顯示警告消息

Question

我有一個簡單的AngularJS應用程序，允許用戶搜索Flickr照片。問題是在IE中，當我調用Flickr API時，我收到以下消息：

此頁面正在訪問不受其控制的信息。這帶來了安全風險。你想繼續嗎？

如果我點擊是，該應用程序工作並加載相關照片。但是，在Chrome和Firefox中，我沒有收到任何消息，也沒有任何反應 - 沒有照片加載。

下面是代碼：

function PhotoController($scope, photoData) { 
    $scope.thumbSize = 'small'; 
    $scope.setThumbSize = function (size) { $scope.thumbSize = size; }; 

    $scope.submitSearch = function getPhotos() { 
     $scope.photos = []; 
     $scope.items = []; 

     photoData.getAllItems($scope.searchKeyword).then(function (data) { 
      var parsedData = angular.fromJson(data); 
      $scope.items = parsedData.photos.photo; 

      for (var i = 0; i < $scope.items.length; i++) { 
       var photo = $scope.items[i]; 
       $scope.photos.push({ title: photo.title, thumbUrl: ' http://farm' + photo.farm + '.staticflickr.com/' + photo.server + '/' + photo.id + '_' + photo.secret + '_m.jpg' }); 
      } 
     }, 
     function (errorMessage) { 
      $scope.error = errorMessage; 
     }); 

    }; 
} 

angular.module('photoApp').factory('photoData', function ($http, $q) { 
    return { 
     getAllItems: function (keyWord) { 
      //Creating a deferred object 
      var deferred = $q.defer(); 
      var apiUrl = 'http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=myAPIkey&tags=' + keyWord + '&format=json&nojsoncallback=1'; 

      //Calling Web API to fetch pics 
      $http.get(apiUrl).success(function (data) { 
       deferred.resolve(data); 
      }).error(function() { 
       deferred.reject("An error occured while fetching photos"); 
      }); 
      return deferred.promise; 
     } 
    } 
}); 

如何擺脫消息，並使其在Chrome/Firefox瀏覽器？

更新：我更改了代碼爲基於joakimbl的plunker，現在運行在Chrome和FF但IE仍然會引發警告消息。

var app = angular.module("photoApp", []); 

app.controller('PhotoController', function ($scope, photoData) { 
    $scope.thumbSize = 'small'; 
    $scope.setThumbSize = function (size) { $scope.thumbSize = size; }; 

    $scope.submitSearch = function getPhotos() { 
     $scope.photos = []; 
     $scope.items = []; 

     photoData.getAllItems($scope.searchKeyword).then(function (data) { 
      var parsedData = angular.fromJson(data); 
      $scope.items = parsedData.photos.photo; 

      for (var i = 0; i < $scope.items.length; i++) { 
       var photo = $scope.items[i]; 
       $scope.photos.push({ title: photo.title, thumbUrl: ' http://farm' + photo.farm + '.staticflickr.com/' + photo.server + '/' + photo.id + '_' + photo.secret + '_m.jpg' }); 
      } 
     }, 
     function (errorMessage) { 
      $scope.error = errorMessage; 
     }); 
    }; 
}); 

app.config(function ($httpProvider) { 
    delete $httpProvider.defaults.headers.common['X-Requested-With']; 
}); 

app.factory('photoData', function ($http, $q) { 
    return { 
     getAllItems: function (keyWord) { 
      //Creating a deferred object 
      var deferred = $q.defer(); 
      var apiUrl = 'http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=84ad829261f6347dbfc4bf23fc1afdbd&tags=' + keyWord + '&format=json&nojsoncallback=1'; 

      //$http.defaults.useXDomain = true; 
      //delete $http.defaults.headers.common['X-Requested-With']; 

      //Calling Web API to fetch pics 
      $http.get(apiUrl).success(function (data) { 
       //Passing data to deferred's resolve function on successful completion 
       deferred.resolve(data); 
      }).error(function (error) { 
       //Sending a friendly error message in case of failure 
       deferred.reject("An error occured while fetching items"); 
      }); 
      //Returning the promise object 
      return deferred.promise; 
     } 
    } 
}) 

;

Answer 1

X-Requested-With請求標題會導致問題 - see this question for more information。下面的代碼應該可以解決問題：

angular.module('photoApp').config(function($httpProvider){ 
    delete $httpProvider.defaults.headers.common['X-Requested-With']; 
}); 

Answer 2

我遇到了與IE10相同的問題。我添加了使CORS呼叫成爲IE10中受信任站點的URL，並且它工作正常。我建議你這樣做。也許它會有所幫助。