How do I configure grunt-connect-proxy with grunt serve?

Question

I managed to configure grunt to serve my application, but since it serves on localhost:9000, my api calls also go to port 9000 while my api is at port 3000, resulting in a 404 error.

After some research, I've decided I need to use grunt-connect-proxy to proxy my api calls to the right port. I've been beating my head against a wall going through every article, stack overflow question and the documentation, but I can't seem to get the configuration right. See my gruntfile below. Any help will have my undying gratitude.

// Invoke 'strict' JavaScript mode
'use strict';

module.exports = function(grunt) {
    require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
    grunt.initConfig({
        less: {
            development: {
                options: {
                    compress: true,
                    yuicompress: true,
                    optimization: 2,
                    paths: ['public/styles/less']
                },
                files: {
                    "public/styles/css/main.css": "public/styles/less/main.less" // destination file and source file
                }
            }
        },
        watch: {
            styles: {
                files: ['public/styles/less/*.less'],
                tasks: ['less'],
                options: {
                    nospawn: true
                }
            }
        },
        connect: {
            server: {
                options: {
                    port: 8000,
                    base: 'public',
                    logger: 'dev',
                    hostname: 'localhost',
                    middleware: function (connect, options, defaultMiddleware) {
                        var proxy = require('grunt-connect-proxy/lib/utils').proxyRequest;
                        return [
                            // Include the proxy first
                            proxy
                        ].concat(defaultMiddleware);
                    }
                },
                proxies: [
                    {
                        context: '/',
                        host: '127.0.0.1',
                        port: 3000,
                        https: false,
                        xforward: false,
                        headers: {
                            "x-custom-added-header": 'value'
                        },
                        hideHeaders: ['x-removed-header']
                    }
                ]
            },
            serve: {
                options:{
                    port: 9000,
                    hostname: "127.0.0.1",
                    middleware: function(connect, options) {
                    return [
                        require('grunt-contrib-livereload/lib/utils').livereloadSnippet,
                        connect.static(options.base[0])
                    ];
                }
            }
        }
    },
    open: {
      serve: {
        path: 'http://localhost:<%= connect.serve.options.port%>/public'
      }
    },
    regarde: {
        serve: {
            files:['public/index.html','public/script/*.js','public/script/**/*.js','public/styles/**/*.css','public/styles/less/*.less','public/views/*.html'],
            tasks: ['livereload']
        }
    }
});

grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-less');
//grunt.loadNpmTasks('grunt-contrib-clean');
//grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-connect-proxy');

grunt.registerTask('serve',['less','livereload-start','connect:serve','open:serve','regarde:serve']);
grunt.registerTask('server', function (target) {
    grunt.task.run([
        //'clean:server',
        //'compass:server',
        'configureProxies:server',
        'connect:server',
        'watch'
    ]);
});

};