如何在AngularJs中启用CORS
我已经使用JavaScript为Flickr照片searchAPI创build了一个演示。 现在我把它转换成AngularJs。 我在互联网上search，find下面的configuration。
组态：
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无法加载url。 访问控制允许来源不允许来源
http://samurails.com/tutorial/cors-with-angular-js-and-sinatra/
编辑：
我在@Quentin的build议中在node.js中创build了一个代理服务器：
var http = require('http'); var url = require('url'); var fs = require('fs'); var server; server = http.createServer(function (req, res) { // your normal server code var path = url.parse(req.url).pathname; fs.readFile(__dirname + path, function (err, data) { if (err) { return send404(res); } res.writeHead(200, {'Content-Type':path == 'json.js' ? 'text/javascript' : 'text/html'}); res.write(data, 'utf8'); res.end(); }); }), server.listen(8001); //using express to load customizes static files var express = require("express"), app = express(); app.all("/api/*", function (req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Cache-Control, Pragma, Origin, Authorization, Content-Type, X-Requested-With"); res.header("Access-Control-Allow-Methods", "GET, PUT, POST"); return next(); }); app.use("/js", express.static(__dirname + '/js')); app.listen(3001);
最终编辑
我删除了授权标题
headers: {'Authorization': 'Token token=xxxxYYYYZzzz'}
它运行正常。 我有我想要的。 感谢大家参与这个问题
你没有。 您提出请求的服务器必须实施CORS才能从您的网站访问权限授予JavaScript。 您的JavaScript无法授予访问其他网站的权限。
我有一个类似的问题，对我来说，它归结为在接收端的响应添加以下HTTP标头：
Access-Control-Allow-Headers: Content-Type Access-Control-Allow-Methods: GET, POST, OPTIONS Access-Control-Allow-Origin: *
您最好不要在最后使用* ，而只使用发送数据的主机的域名。 像*.example.com
但是，只有当你有权访问服务器的configuration时，这才是可行的。
尝试使用资源服务来消费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>
我自己回答。
CORSangular度js + restEasy上POST
那么最后我来到这个解决方法：它与IE的工作原因是因为IE直接发送一个POST，而不是首先预检请求要求权限。 但我仍然不知道为什么filter不能够pipe理一个OPTIONS请求，并且默认发送filter中没有描述的头文件（看起来像是一个覆盖，唯一的情况是…也许restEasy的东西.. 。）
所以我在rest服务中创build了一个OPTIONSpath，用于重写响应头，并在响应头中包含响应头
我仍然在寻找干净的方式来做到这一点，如果任何人面临这一点。
