使用node.js / express和AngularJS的CORS請求

Question

我想實現一個非常簡單的CORS方案。 這是我用node.js / express編寫的服務器：

var express        = require('express');
var morgan         = require('morgan');
var bodyParser     = require('body-parser');
var methodOverride = require('method-override');
var app            = express();
var router         = express.Router();

router.use(function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'X-Test-Header');
    next();
});

router.get('/', function(req, res, next) {
    console.log('Request arrived');
    res.json({data: 'hello'});
    next();
});

app.set('port', process.env.PORT || 3000);
app.use(morgan('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(methodOverride());  
app.use('/', router);

app.listen(app.get('port'), function(){
  console.log('Express is up on ' + app.get('port'));
});

為了補充這一點，我還有一個非常簡單的AngularJS文件：

var app = angular.module('myapp', []);

    app.controller('MyCtrl', function($scope, $http) {
        var config = {
            headers:  {
                'X-Test-Header': 'Test Header Data'
            }
        };

        $scope.test = 'Hello World';
        $scope.getData = function () {
            console.log('clicked');
            $http.get('http://localhost:3000/', config).
            success(function (data, status) {
                console.log('Status: ', status);
                console.log('Data: ', data);
            }).
            error(function (data, status) {
                console.log('Status: ', status);
                console.log('Data: ', data || 'Request failed');
            });
        }
    });

在控制台中，node / express應用程序的輸出很簡單：

Express server listening on port 3000
OPTIONS / 200 4.767 ms - 3
Request arrived
GET / 200 2.572 ms - 16

在瀏覽器的控制台中，我看到：“單擊”。

在“網絡”選項卡上，單擊按鈕后我看到有兩個請求-一個OPTIONS返回200 OK，另一個是GET方法，該方法永遠待定。

所以我的問題當然是，為什么我會經歷這種行為？ 我嘗試挖掘並閱讀了許多文章，並嘗試了他們的建議，但沒有一個起作用。

Answer 1

有趣的是，以下內容解決了該問題：

router.all('/', function(req, res, next) {
    console.log('Request arrived');
    res.type('application/json');
    res.json({datax: 'hello'});
    next();
});

注意router.get('/') > router.get('/') vs router.all('/') 。 我有點困惑為什么會這樣。

更新這是我編寫的更好的代碼，現在我對此有了更多了解...

app.route('/')
    .options(function (req, res, next) {
        res.status(200).end();
        next();
    })
    .get(function (req, res) {
        res.json({data: 'hello'});
    });

以下是關於我的發現的快速摘要： http : //tamas.io/node-jsexpress-cors-implementation/