AngularJS -调用Flickr API失败并给出警告消息
AngularJS - Calling Flickr API fails with warning message
我有一个简单的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,它工作得很好。我建议你也这样做。也许会有帮助。
相关文章:
- Webpack UglifyJS仍在发出警告消息
- 我确实有一个表单,如果用户输入了输入,它应该检查否定或空的输入框,并抛出一条警告消息
- 两组复选框的警告消息
- 如何在表空或在jquery数据表中找不到匹配项的情况下添加自定义警告消息
- 是否有JQuery或Javascript警告消息实用程序,可以在不干扰用户的情况下显示和超时
- 添加侦听器以向文本字段创建警告消息
- 无法使用 PHP 显示警告消息
- 带有警告消息的日期选择器
- 如果在指定日期内,则使用日期选择器显示警告消息
- 当用户第一次关闭特定页面时显示警告消息
- 如何制作'您确定要离开此页面吗'浏览器中的警告消息
- Office加载项-句柄'此加载项没有响应'警告消息
- 如何在警告消息中单击“确定”后关闭浏览器中的当前窗口
- 禁止在窗口上显示警告消息.打开
- Javascript不显示警告消息
- 不会弹出警告消息
- 如何在Symfony2中更改警告消息中的Flash消息
- 如何使用Jquery保存数据后显示警告消息
- 不完全回复来自服务器的警告消息用ie8浏览器显示
- 当没有互联网连接时显示警告消息