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

我想允许访问跨源数据调用，我需要能够执行其余的API调用到服务器。

我的连接grunt任务configuration如下：

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 / 。 没有中间件configuration的应用程序正在工作，并索引文件正确加载。

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

关于我的gruntfile的更多细节是，我使用yeomanangular种子应用程序作为我的基础应用程序。

Answer 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('.')) ]; } }, }, 

Answer 2

点头给bpaul，让我走上正确答案的道路。 对类似问题的回应格式将在此处起作用。

用中间件replace“下一个”，并在返回之前将匿名函数推入中间件数组中：

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

Answer 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

Answer 4

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

去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; } }, },