我已经使用JavaScript为Flickr照片搜索API创建了一个演示。现在我正在将它转换为AngularJs。我已经在网上搜索过了,找到了下面的配置。
配置:
myApp.config(function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
});
服务:
myApp.service('dataService', function($http) {
delete $http.defaults.headers.common['X-Requested-With'];
this.flickrPhotoSearch = function() {
return $http({
method: 'GET',
url: 'http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=3f807259749363aaa29c76012fa93945&tags=india&format=json&callback=?',
dataType: 'jsonp',
headers: {'Authorization': 'Token token=xxxxYYYYZzzz'}
});
}
});
控制器:
myApp.controller('flickrController', function($scope, dataService) {
$scope.data = null;
dataService.flickrPhotoSearch().then(function(dataResponse) {
$scope.data = dataResponse;
console.log($scope.data);
});
});
但是我还是得到了同样的错误。以下是我尝试过的一些链接:
XMLHttpRequest cannot load URL. Origin not allowed by Access-Control-Allow-Origin
发布于 2014-05-23 16:10:56
您不需要。您向其发出请求的服务器必须实现CORS,以便从您的网站访问JavaScript。您的JavaScript无法授予自己访问其他网站的权限。
发布于 2014-05-23 16:43:51
尝试使用资源服务来使用flickr jsonp:
var MyApp = angular.module('MyApp', ['ng', 'ngResource']);
MyApp.factory('flickrPhotos', function ($resource) {
return $resource('http://api.flickr.com/services/feeds/photos_public.gne', { format: 'json', jsoncallback: 'JSON_CALLBACK' }, { 'load': { 'method': 'JSONP' } });
});
MyApp.directive('masonry', function ($parse) {
return {
restrict: 'AC',
link: function (scope, elem, attrs) {
elem.masonry({ itemSelector: '.masonry-item', columnWidth: $parse(attrs.masonry)(scope) });
}
};
});
MyApp.directive('masonryItem', function () {
return {
restrict: 'AC',
link: function (scope, elem, attrs) {
elem.imagesLoaded(function () {
elem.parents('.masonry').masonry('reload');
});
}
};
});
MyApp.controller('MasonryCtrl', function ($scope, flickrPhotos) {
$scope.photos = flickrPhotos.load({ tags: 'dogs' });
});
模板:
<div class="masonry: 240;" ng-controller="MasonryCtrl">
<div class="masonry-item" ng-repeat="item in photos.items">
<img ng-src="{{ item.media.m }}" />
</div>
</div>
发布于 2019-07-02 19:39:42
我遇到了类似的问题,问题出在后端。我使用的是节点服务器(Express)。我收到了来自前端(Angular)的get请求,如下所示
onGetUser(){
return this.http.get("http://localhost:3000/user").pipe(map(
(response:Response)=>{
const user =response.json();
return user;
}
))
}
但它给出了以下错误
这是使用不带头部的express编写的后端代码
app.get('/user',async(req,res)=>{
const user=await getuser();
res.send(user);
})
在向方法添加了一个头之后,问题就解决了
app.get('/user',async(req,res)=>{
res.header("Access-Control-Allow-Origin", "*");
const user=await getuser();
res.send(user);
})
您可以获得有关Enabling CORS on Node JS的更多详细信息
https://stackoverflow.com/questions/23823010
复制相似问题