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:

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

When I run the grunt server I am getting Cannot GET /. Without the middleware configuration the app is working and the index file is loaded correctly.

Could you guide me to what I am doing wrong or missing out?

Some more details about my gruntfile is that I am using the yeoman angular seed app as my base to the app.

I don't think the middleware function takes a "next" parameter. — bpaul, Feb 05 '14 at 21:36
Yes, the line above should be: middleware: function(connect, options, middlewares). https://github.com/gruntjs/grunt-contrib-connect#middleware, second example under middlewares. — ansorensen, Jul 16 '14 at 22:49

score 6 · Accepted Answer · answered Feb 06 '14 at 01:02

6

Try something like this:

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('.'))

      ];
    }
    },
    },

answered Feb 06 '14 at 01:02

bpaul

1,949
1
13
23

I just tried your change but I am still not able to get the app to work. Some more details about my gruntfile is that I am using the yeoman angular seed app as my base to the app. – Maria Stellini Feb 06 '14 at 08:08
1

If you are using yeoman you shuld add something like this to your middleware: ```connect.static(require('path').resolve(yeomanConfig.app));``` – bpaul Feb 07 '14 at 00:33
This still gives me "Cross-Origin Request Blocked" in firebug. What needs to be done besides the settings above to get CORS working? – Adrian Rosca Jan 15 '15 at 07:39

score 2 · Answer 2 · edited May 23 '17 at 12:16

Nod to bpaul, who set me on the path to correct answer. The format of a response to a similar question will work here.

Replace 'next' with middlewares, and push your anonymous function into the middleware array before returning it:

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

Yes, I like this way of doing middleware more. Thanks – bpaul Jan 16 '15 at 19:18 — bpaul, Jan 16 '15 at 19:18

score 0 · Answer 3 · answered Feb 06 '14 at 08:19

0

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();
      }];
     }
   };

this will helps you in getting the get call Access-Control-Allow-Credentials

answered Feb 06 '14 at 08:19

Lalit Sachdeva

6,469
2
19
25

Tried the changes but still no luck .. don't know what I am doing wrong – Maria Stellini Feb 06 '14 at 08:49
The above will throw an error because res doesn't have a header method. You need to use res.setHeader. – ansorensen Jul 16 '14 at 22:32

score 0 · Answer 4 · answered Jun 18 '15 at 13:56

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

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

4 Answers4

Linked