grunt-connect-proxy解决开发时跨域问题

最近的项目中前后端是完全分离开发的，前端用grunt管理项目。这样就会导致一个问题：开发时前端调用后台的接口时因为不在一个服务器，所以会出现跨域问题。但是也不能用JSONP或CROS方式实现真正的跨域，因为项目发布时其实是在同一个服务器下的。

这时候我们的grunt-connect-proxy就出场了，它就是专门解决这个问题的。

具体配置：

1. 先下载安装这个组件

npm install grunt-connect-proxy --save-dev

这里要注意：一定要提前先装上grunt-contrib-livereload这个组件，不然grunt serve时会总是报错

2.增加配置

var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet;
var mountFolder = function (connect, dir) {
    return connect.static(require('path').resolve(dir));
};
var proxySnippet = require('grunt-connect-proxy/lib/utils').proxyRequest;

这断代码要加在gruntfile.js顶部，module.exports上边。

然后，再connect中添加proxy配置及livereload配置

connect: {
      options: {
        port: 9000,
        open: true,
        livereload: 35729,
        // Change this to '0.0.0.0' to access the server from outside
        hostname: 'localhost'
      },
      proxies: [
                {
                    context: '/website',
                    host: 'www.somesite.com',
                    port: 80,
                    https: false,
                    changeOrigin: true
                }
            ],
      livereload: {
        options: {
          middleware: function (connect) {
                        return [
                            lrSnippet,
                            mountFolder(connect, '.tmp'),
                            connect().use('/bower_components', connect.static('./bower_components')),
                            mountFolder(connect, config.app),
                            proxySnippet,
                        ];
                    }
        }
      },
/***/
}

接下来，再serve这个task里添加proxy

grunt.task.run([
      'clean:server',
      'wiredep',
      'concurrent:server',
      'autoprefixer',
      'configureProxies',     //增加到livereload前边
      'connect:livereload',
      'watch'
    ]);

OK，到这里代理就加上了！

参考：

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

http://fettblog.eu/blog/2013/09/20/using-grunt-connect-proxy/

http://www.himysql.com/2014/07/29/grunt-connect-proxy-configure/

http://www.ngnice.com/posts/76c4bd0f7a4cdc