最近的项目中前后端是完全分离开发的，前端用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
