带有NodeJS GET请求的AngularJS失败 – “Access-Control-Allow-Headers不允许Access-Control-Allow-Headers”
我一直在寻找一些类似的问题寻找答案，但我找不到它。 我有一个具有express的node.js服务器：
app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Access-Control-Allow-Headers"); next(); }); app.use(express.static(__dirname+'/assets')); app.use(bodyParser.json()); app.get('/', function(req, res, next) { res.sendFile(__dirname + '/public/index.html'); }); 和AngularJS一起使用GET请求到一个REST API。 它们由search表单中的键入事件触发。 app.config：
app.config(function ($httpProvider) { $httpProvider.defaults.headers.common['Access-Control-Allow-Headers'] = 'Authorization, Access-Control-Allow-Headers'; $httpProvider.interceptors.push('TokenInterceptor'); });
…和请求代码本身：
$scope.requestMovies = function() { $http.get('http://www.omdbapi.com/?s=' + $scope.titleToSearch + '&type=movie&r=json') .success(function(data, status, headers, config) { $scope.movies = data.Search; }) .error(function(data, status, headers, config) { alert("No movie found"); }); };
这工作得很好，直到我将身份validation添加到我的项目（因此拦截器），从那以后，我总是得到一个错误消息
XMLHttpRequest cannot load http://www.omdbapi.com/?s=darkmovie&type=movie&r=json. Request header field Access-Control-Allow-Headers is not allowed by Access-Control-Allow-Headers.
即使我DID授权标题都在前端和后端。 在Firefox中也是如此。 我究竟做错了什么？
UPDATE
忘记发布我的TokenInterceptor服务：
app.service('TokenInterceptor', function($q, $window, $location, AuthenticationService) { return { request: function (config) { config.headers = config.headers || {}; if ($window.sessionStorage.token) { config.headers.Authorization = 'Bearer ' + $window.sessionStorage.token; } return config; }, requestError: function(rejection) { return $q.reject(rejection); }, /* Set Authentication.isAuthenticated to true if 200 received */ response: function (response) { if (response !== null && response.status == 200 && $window.sessionStorage.token && !AuthenticationService.isAuthenticated) { AuthenticationService.isAuthenticated = true; } return response || $q.when(response); }, /* Revoke client authentication if 401 is received */ responseError: function(rejection) { if (rejection !== null && rejection.status === 401 && ($window.sessionStorage.token || AuthenticationService.isAuthenticated)) { delete $window.sessionStorage.token; AuthenticationService.isAuthenticated = false; $location.path("/"); } return $q.reject(rejection); } }; });
尽pipe我仍然没有看到什么是错的。 这是假设一种方法来检查每次angular度视图更改时从服务器发送的授权令牌。
改变最后一个
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
我正在将所有请求委托给一个EXTERNAL API给CLIENT 。 我应该认为这是可怕的（而且显然是不可能的）。 但是，因为它第一次运作（我不知道如何或为什么），我保持这样的架构。 所以现在基本上我所做的是：
客户端现在将URL参数发送到服务器：
$scope.requestMovies = function() { $http.post('/requestMovies', {title: $scope.titleToSearch}) .success(function(data, status, headers, config) { console.log(data.Search); $scope.movies = data.Search; }) .error(function(data, status, headers, config) { alert("No movie found"); }); };
它使用一个方便的节点包处理GET请求：
var Client = require('node-rest-client').Client; var client = new Client(); //(...) app.post('/requestMovies', function(req, res, next) { client.get('http://www.omdbapi.com/?s=' + req.body.title + '&type=movie&r=json', function(data, response){ console.log('CLIENT RESPONSE DATA :' + data); res.send(data); }); });
当然，服务器有任何许可来做任何types的请求。 我希望这可以帮助任何人。