AngularJS -调用Flickr API失败并给出警告消息

AngularJS - Calling Flickr API fails with warning message

本文关键字:警告 消息 失败 调用 Flickr API AngularJS      更新时间:2023-09-26

我有一个简单的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的柱塞,它现在在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;
        }
    }
})

,

X-Requested-With请求报头导致问题-有关更多信息,请参阅此问题。下面的代码应该可以解决这个问题:

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

我在IE10中遇到了同样的问题。我在IE10中添加了使CORS调用成为可信站点的url,它工作得很好。我建议你也这样做。也许会有帮助。