如何在 API 和 Angular 客户端之间启用 CORS

Question

几天来，我们一直在尝试设置 CORS，但没有成功。因此，非常感谢知道这是如何一劳永逸地完成的。 我们要做的是：

API 服务器（当然只是服务器的一部分）：

 // Config
 app.configure(function () {
   app.use(bodyParser.urlencoded({ extended: false }))
   app.use(bodyParser.json())    
   app.use(express.methodOverride());
   app.use(function(req, res, next) {
     res.header("Access-Control-Allow-Origin", "*");
     res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
     next();
   });
   app.use(express.static(path.join(application_root, "public")));
   app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
   app.use(app.router);
 });

Angular 应用服务器（也只是设置的一部分）：

 server.use(gzippo.staticGzip(__dirname + '/public'));
 server.set('view engine', 'ejs');

 // Environment
 var ENV = process.argv[2] || 'dev'; // prod or dev
 var port = process.env.PORT || 8080;

 // Single Page App (this route handles all other requests (catchall))
 server.all('/*', function(req, res, next) {
   res.set('Content-Type', 'text/html');
   res.render('index', includeFiles); // looks by default in views
 });

角度配置：

 app.config(['$locationProvider', '$httpProvider', '$urlRouterProvider', '$stateProvider',
    function($locationProvider, $httpProvider, $urlRouterProvider, $stateProvider) {

       ... Other stuff ...

       // enable CORS
       $httpProvider.defaults.useXDomain = true;
       delete $httpProvider.defaults.headers.common['X-Requested-With'];

       ...

    }
 ])

目前当我们从 angular 发出请求时：

 $http.post('http://<ip-address>:8889/signin', {email: 'mike@gmail.com', pass: '1234abcd'})
 .success(function(data) {
   console.log(data);
 });

我们收到以下错误（在 firefox 上）：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://<ip-address>/signin. (Reason: CORS preflight channel did not succeed).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://<ip-address>:8889/signin. (Reason: CORS request failed).

Answer 1

经过反复试验，我们使用了 npm-module cors，一切顺利。

对 API 服务器的修改：

// Config
app.configure(function () {
  app.use(bodyParser.urlencoded({ extended: false }))
  app.use(bodyParser.json())    
  app.use(express.methodOverride());
  app.use(cors());    // this was included
  app.use(express.static(path.join(application_root, "public")));
  app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
  app.use(app.router);
});

角度配置：

app.config(['$locationProvider', '$httpProvider', '$urlRouterProvider', '$stateProvider',
   function($locationProvider, $httpProvider, $urlRouterProvider, $stateProvider) {

      ... Other stuff ...

      // deleted these rows, since they are unnecessary
      // $httpProvider.defaults.useXDomain = true;
      // delete $httpProvider.defaults.headers.common['X-Requested-With'];

      ...

   }
])

就是这样！希望它可以帮助将来的人。