Javascript 带有node.js/express和AngularJS的CORS请求

我想实现一个非常简单的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

在浏览器的控制台中，我看到：“单击”

在“网络”选项卡上，我看到单击按钮后发出了两个请求—一个选项返回200 OK，另一个GET方法永远挂起

---

所以我的问题当然是，为什么我会经历这种行为？我试着挖掘和阅读了不少文章，尝试了他们的建议，但没有一篇有效。

有趣的是，以下内容解决了这个问题：

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

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

---

关于我的发现，这里有一篇简短的文章：

我真的不确定，但我猜您的Express中间件中可能有某种无限循环。我看不出CORS设置有任何明显的问题，即使有问题，我也看不出会导致GET上出现永无止境的挂起状态。$http.GET应该返回一个$q对象，您可以使用它。然后，设置notifyCallback第三个参数。然后，我认为应该触发该参数以报告XHR进度事件，但我不是100%肯定。尝试添加类似$http.get…thenundefined，undefined，functionresult{console.logprogress；}的内容。如果这样做有效，它将确认在发送JSON后发生挂起。hi@apsillers-$http.get，config。未定义，未定义，函数结果{console.log'progress'；}；-不会将消息“progress”返回到consoleWell，这并不能最终证明任何事情-实际上我不是100%确定Angular的$http promise使用notify回调。无论如何，从您看到请求到达控制台这一事实来看，get回调似乎正在运行，因此挂断一定是在之后的某个时间。尝试删除该应用程序。在应用程序之后使用呼叫。逐个获取，看看这是否解决了问题。不，不幸的是，没有任何更改