带有NodeJS GET请求的AngularJS失败-“ Access-Control-Allow-Headers不允许Access-Control-Allow-Header”

Question

I've been looking around for some similar questions in search of an answer but I can't find it. I have a node.js server with express:

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');
});

And AngularJS working with GET requests to a REST API. They're triggered by keyup events in a searchform. The app.config:

app.config(function ($httpProvider) {
  $httpProvider.defaults.headers.common['Access-Control-Allow-Headers'] = 'Authorization, Access-Control-Allow-Headers';
  $httpProvider.interceptors.push('TokenInterceptor');
});

... And the request code itself:

$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");
    });
  };

This worked fine until I added authentication to my project (hence the interceptor), and since then I invariably get an error message
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.
even though I DID authorize the headers both in the front and back end. Same thing happens in Firefox as it does in Chrome. What am I doing wrong?

UPDATE

Forgot to post my TokenInterceptor service:

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);
    }
  };
});

Although I still fail to see what's wrong. This was suppose to be a way to check for the authorization token sent from the server everytime an angular view changed.

Answer 1

将最后一个更改为

res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');

Answer 2

I was delegating ALL requests to an EXTERNAL API to the CLIENT . I should have figured that this was terrible (and apparently impossible). But since it worked the first time (and I have no idea how or why) I kept my architecture like that. So now basically what I do is:

The client now POSTS the URL parameter to the server:

$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");
    });
  };

Which handles the GET request for it using a handy node package :

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);
  });

});

And of course, the server has any permission to do any kind of requests. I hope this helps anyone out there.