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 outsidehostname: '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