Grunt 连接任务和中间件 Access-Control-Allow-Origin答案

【问题标题】：Grunt connect task and middleware Access-Control-Allow-OriginGrunt 连接任务和中间件 Access-Control-Allow-Origin
【发布时间】：2014-02-05 15:23:24
【问题描述】：

我想允许访问我需要能够对服务器执行 REST API 调用的跨源调用。

我的connect grunt任务配置如下：

    connect: {
  options: {
    port: 9000,
    // Change this to '0.0.0.0' to access the server from outside.
    hostname: 'localhost',
    livereload: 35729,
    middleware: function(connect, options, next) {
      return [
        function(req, res, next) {
          res.setHeader('Access-Control-Allow-Origin', '*');
          res.setHeader('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
          res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
          next();
        }
      ];
    }
  },
},

当我运行 grunt 服务器时，我得到了Cannot GET /。在没有中间件配置的情况下，应用程序可以正常工作并且索引文件已正确加载。

你能指导我做错了什么或错过了什么吗？

关于我的 gruntfile 的更多细节是我正在使用 yeoman angular seed 应用程序作为我的应用程序的基础。

【问题讨论】：

我不认为中间件函数需要“next”参数。
是的，上面那行应该是：middleware: function(connect, options, middlewares)。 github.com/gruntjs/grunt-contrib-connect#middleware，中间件下的第二个例子。

标签： javascript node.js angularjs gruntjs grunt-contrib-connect

【解决方案1】：

试试这样的：

connect: {
  options: {
    port: 9000,
    // Change this to '0.0.0.0' to access the server from outside.
    hostname: 'localhost',
    livereload: 35729,

    // remove next from params
    middleware: function(connect, options) {
      return [
        function(req, res, next) {
          res.setHeader('Access-Control-Allow-Origin', '*');
          res.setHeader('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
          res.setHeader('Access-Control-Allow-Headers', 'Content-Type');

          // don't just call next() return it
          return next();
        },

        // add other middlewares here 
        connect.static(require('path').resolve('.'))

      ];
    }
    },
    },

【讨论】：

我刚刚尝试了您的更改，但我仍然无法让应用程序正常工作。关于我的 gruntfile 的更多细节是我使用 yeoman angular seed 应用程序作为我的应用程序的基础。
如果您使用的是 yeoman，您应该在中间件中添加类似的内容：connect.static(require('path').resolve(yeomanConfig.app));
这仍然让我在萤火虫中出现“跨源请求被阻止”。除了上述设置之外还需要做什么才能使 CORS 正常工作？

【解决方案2】：

向 bpaul 点头，他让我走上了正确答案的道路。对similar question 的回复格式可以在这里使用。

将“next”替换为中间件，并在返回之前将您的匿名函数推送到中间件数组中：

middleware: function(connect, options, middlewares) {

    middlewares.unshift(function(req, res, next) {
        res.setHeader('Access-Control-Allow-Credentials', true);
        res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        res.setHeader('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
        next();
    });

    return middlewares;
}

【讨论】：

是的，我更喜欢这种做中间件的方式。谢谢

【解决方案3】：

connect: {
  options: {
    port: 9000,
    // Change this to '0.0.0.0' to access the server from outside.
    hostname: 'localhost',
    livereload: 35729,
    middleware: function(connect, options, next) {
      return [
        function(req, res, next) {
         res.header('Access-Control-Allow-Credentials', true);
         res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
         res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
         next();
      }];
     }
   };

这将帮助您获得调用 Access-Control-Allow-Credentials

【讨论】：

尝试了更改但仍然没有运气..不知道我做错了什么
上面会抛出错误，因为 res 没有 header 方法。你需要使用 res.setHeader.

【解决方案4】：

Grunt connect 带有多个中间件，作为函数存储在一个数组中。当您通过返回一个数组来设置中间件时，您会覆盖负责为您的页面提供服务的现有中间件。

取消 ansorensen 对文档的评论，https://github.com/gruntjs/grunt-contrib-connect#middleware 相关部分是。

options: {
    middleware: function(connect, options, middlewares) {
      // inject a custom middleware into the array of default middlewares
      middlewares.unshift(function(req, res, next) {
        if (req.url !== '/hello/world') return next();

        res.end('Hello, world from port #' + options.port + '!');
      });

      return middlewares;
    },
},

数组前面的中间件在数组后面的中间件之前生效。

所以你想要的是

connect: {
    options: {
        port: 9000,
        // Change this to '0.0.0.0' to access the server from outside.
        hostname: 'localhost',
        livereload: 35729,

        // remove next from params
        middleware: function(connect, options, middlewares) {
            middlewares.unshift(function(req, res, next) {
                res.setHeader('Access-Control-Allow-Origin', '*');
                res.setHeader('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
                res.setHeader('Access-Control-Allow-Headers', 'Content-Type');

                return next();
            });

            return middlewares;
        }
    },
},

【讨论】：