Grunt connect task and middleware Access-Control-Allow-Origin

Question

I would like to allow access to cross origin calls which I need to be able to perform rest API calls to the server.

My connect grunt task is configured as follows:

Answer 1

Grunt connect comes with multiple middlewares, stored as functions in an array. When you set middleware by returning an array, you override the existing middleware responsible for serving your pages.

Going off ansorensen's comment of the documentation, https://github.com/gruntjs/grunt-contrib-connect#middleware the relevant section being.

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

Middleware earlier in the array take effect before those later in the array.

So what you would want is

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