Grunt-connect-proxy

最近的前端项目均基于 yoeman 搭建。yeoman 基于 grunt ，默认启动 9000 端口的 WEB 服务，开发起来非常方便。

不过，我们的后端项目监听在 3000 端口。在向后端请求时，出报跨域的错误。

幸好，找到了 grunt-connect-proxy 用于代理 API 跨域请求。

不过，网上好多资料看上去都是基于旧版本的。本文写作时 grunt-connect-proxy 最新版为 0.1.10，网上的配置要么太复杂要么不能正常工作。

正确的配置

新版的配置简单多了：

grunt.loadNpmTasks('grunt-connect-proxy'); /* 引入里Task */

connect: {
    options: {
        port: 9000,
        hostname: 'localhost',
        livereload: 35729
    },
    /* 在这里加入下面的内容 */
    proxies: [
        { context: '/api', host: 'localhost', port:3000 },
        { context: '/aapi', host: 'localhost', port:4000}, /* 还可加多个 */
    ],
    /* 加入结束 */
    livereload: {
        options: {
            middleware: function (connect) {
            return [
                /* 加上下面这行 */
                require('grunt-connect-proxy/lib/utils').proxyRequest,
                ...
            ];
        }
    }
}

/* 最后在 serve Task 里加上 configureProxies:server */
grunt.registerTask('serve', 'Compile then start a connect web server', function (target) {
    ...
    grunt.task.run([
        ...
        'configureProxies:server', /* 在 livereload 前加上 */
        'connect:livereload',
        ...
    ]);
});