Grunt Connect Proxy returns 503 (Service Unavailable) in Browser

Question

I am working with a yeoman generator-angular app and a remote API, my gruntfile config seems to be fine:

// Generated on 2015-06-01 using generator-angular 0.11.1
'use strict';
module.exports = function (grunt) {
  / * Removed for brevity */
  grunt.initConfig({
    yeoman: appConfig,
    watch: {
      / * Removed for brevity */
    },
    connect: {
      options: {
        port: 9000,
        hostname: 'localhost',
        livereload: 35729
      },
      proxies: [
        {
          context: '/api',
          host: 'subdomain.hostname.com',
          xforward: true,
          secure: false,
          headers: {
            'Authorization': 'RemovedToken'
          },
        }
      ],
      livereload: {
        options: {
          open: true,
          middleware: function (connect, options) {
            var middlewares = [require('grunt-connect-proxy/lib/utils').proxyRequest];

            middlewares.push(
                connect.static('.tmp'),
                connect().use('/bower_components',connect.static('./bower_components')),
                connect().use('/app/styles', connect.static('./app/styles')),
                connect().use(connect.static(appConfig.app))
            );

            return middlewares;
          }
        }
      },
      / * Removed for brevity */
    },
    / * Removed for brevity */
  });

  grunt.registerTask('serve', 'Compile then start a connect web server', function (target) {
    if (target === 'dist') {
      return grunt.task.run(['build', 'connect:dist:keepalive']);
    }

    grunt.task.run([
      'clean:server',
      'wiredep',
      'concurrent:server',
      'autoprefixer:server',
      'configureProxies:server',
      'connect:livereload',
      'watch'
    ]);
  });

  grunt.loadNpmTasks('grunt-connect-proxy');
};

grunt serve --verbose returns this when a request is made:

Proxied request: /api/foo/bar/?baz=6 -> http://subdomain.hostname.com:80/api/foo/bar/?baz=6
{
  "host": "localhost:9000",
  "connection": "keep-alive",
  "accept": "application/json, text/plain, */*",
  "user-agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.124 Safari/537.36",
  "referer": "http://localhost:9000/",
  "accept-encoding": "gzip, deflate, sdch",
  "accept-language": "en-US,en;q=0.8,es;q=0.6",
  "cookie": "connect.sid=s%3AQpOp8pdI8GM2g8s0qCX602-ds-Xs-5le.C%2BrosIxHQ4ZcLLPgZKhABjji18kqK2K73C7mjF6scqM",
  "Authorization": "RemovedToken",
  "x-forwarded-for": "127.0.0.1",
  "x-forwarded-port": "9000",
  "x-forwarded-proto": "http"
}

I can't find any error there, maybe that the "host" is still localhost:9000, but I'm unsure if that could be a problem and in Chrome I am getting: 503 Service Unavailable, but there is indeed a service running, I know because I tested it with Postman and everything works fine, could somebody help me with this? Maybe I am missing something in the configuration?

Thanks.

Answer 1

After digging some more in the project I found that I had to specify the "host" header too.

https://github.com/drewzboto/grunt-connect-proxy/issues/72