标签：
最近的项目中前后端是完全分离开发的，前端用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
标签：
原文地址：http://www.cnblogs.com/suiblog/p/4453578.html
