AngularJS - 调用API的Flickr失败，警告信息 [英] AngularJS - Calling Flickr API fails with warning message

问题描述

我有一个简单AngularJS应用程序，允许一个搜索Flickr的照片。问题是在IE中我得到以下信息时，我称之为Flickr的API：

I have a simple AngularJS app that allows one to search for Flickr photos. The problem is in IE I get the the following message when I call the Flickr API:

的本网页访问，是不是在其控制下的信息。这会带来安全风险。是否要继续？的

如果我点击是，应用程序和工作负载相关的照片。然而，在Chrome和Firefox我没有得到任何消息，并没有任何反应 - 没有照片被加载。

If I click Yes, the app works and loads the relevant photos. However, in Chrome and Firefox I do not get any message and nothing happens - no photos are loaded.

下面是code：

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浏览器？

How do I get rid of the message and make it work in Chrome/Firefox?

更新：我改变了code将低于基于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;
        }
    }
})

推荐答案

的 X-请求，以请求头会导致问题 - <一个href=\"http://stackoverflow.com/questions/16661032/http-get-is-not-allowed-by-access-control-allow-origin-but-ajax-is/16662590#16662590\">see这个问题的更多信息。下面code应该解决这个问题：

The X-Requested-With request header causes problems - see this question for more information. The following code should fix the problem:

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

这篇关于AngularJS - 调用API的Flickr失败，警告信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！