Grunt connect headers

Question

I'm using angular seed and I'm putting this in my Gruntfile.js, because I need to allow CORS for development.

    connect: {
        options: {
            port: 9000,
            // Change this to '0.0.0.0' to access the server from outside.
            hostname: '0.0.0.0',
            livereload: 35729,
            // protocol: 'https',
            // remove next from params
        },
        livereload: {
            options: {
                open: true,
                base: [
                    '.tmp',
                    '<%= yeoman.app %>'
                ],
                  middleware: function(connect, options, middlewares) {
                      var enableREST = function(req, res, next){
                      res.setHeader('Access-Control-Allow-Origin',          req.headers.origin);
                      res.setHeader('Access-Control-Allow-Credentials', true);
                      res.setHeader('Access-Control-Allow-Methods',     'GET,HEAD,PUT,PATCH,POST,DELETE');
                      res.setHeader('Access-Control-Allow-Headers',      req.headers['access-control-request-headers']);

                      return next();
                    };
                    middlewares.unshift(enableREST);
                  }
            }
        },
        test: {
            options: {
                port: 9001,
                base: [
                    '.tmp',
                    'test',
                    '<%= yeoman.app %>'
                ]
            }
        },
        dist: {
            options: {
                base: '<%= yeoman.dist %>'
            }
        }
    },

But when I run grunt serve I get an error that middlewares are undefined.

$ grunt serve 
...
Running "connect:livereload" (connect) task
Verifying property connect.livereload exists in config...OK
File: [no files]
Options: protocol="http", port=9000, hostname="0.0.0.0", base=[".tmp","app"], directory=null, keepalive=false, debug=false, livereload=35729, open, middleware=undefined
Warning: Cannot call method 'unshift' of undefined Use --force to continue.

Aborted due to warnings.

I've tried setting my middlewares like this:

            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');

                  return next();
                },


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

But then localhost:9000 returns Cannot GET /. Any suggestion where I'm wrong?

Answer 1

Just had this same problem, it's caused by an out of date package.

If you update grunt-contrib-connect to the latest (currently, 0.8.0) this should fix your problem. You may also need to change the version number in your package.json (if you have one).