为什么需要使用代理？
目前，前端发展飞速，前后端分离式开发已经不是新鲜事儿。
1 如果前端只是静态的页面（不需要调用后端的api加载动态数据），那么前端直接在本地开发即可。
即使是前后端分开部署，只需要单独为前端启动一个服务，使用gulp-connect即可。不会？（请戳gulp之用gulp-connect开启一个本地webServer）2 如果前端需要调用后端提供的接口呢？除非前后端部署在同一个服务器上，否则由于浏览器的限制是没办法跨域请求数据的。真实情况是，我们在本地开发时就需要访问接口，这时后端的程序猿给你的往往是这样一个地址
http://192.168.1.123/controller/action，有人说上传代码到http://192.168.1.123/放在一个目录下不就行了，是啊！可以的。但是好麻烦有没有，调试接口需要传代码上去！！！！3 如果我的数据是从其他的服务器来的呢？例如我想访问豆瓣的开放接口
$.post('https://api.douban.com/v2/book/1220562',{},function(data){
console.log(data);
})
豆瓣告诉你，不行！你跨域了！
所以，还是代理来的方便。
代理是个什么鬼？
代理请求通俗点讲，就是把发往 a.com的请求，通过代理服务器发送到b.com。
怎么开启一个代理？
代码如下：
//服务端口
const PORT=8000;
//启动服务的根目录
const server_root='src'
//引用gulp
var gulp = require('gulp');
//引用gulp开启服务的插件
var connect = require('gulp-connect');
//引用插件 gulp代理中间件插件
var proxy = require('http-proxy-middleware');
//开启服务
gulp.task('proxyServer', function() {
connect.server({
root: [server_root],
port: PORT,
middleware: function(connect, opt) {
return [
proxy('/api', {
target: 'https://api.douban.com/v2',//代理的目标地址
changeOrigin:true,//
pathRewrite:{//路径重写规则
'^/api':''
}
})
]
}
});
});
说明
'/api' =>匹配你要代理的请求地址前缀
target=》你要把请求代理到哪
pathRewrite =》是把你再页面中写的请求地址 某部分 重写为后面的字符串
(例子中讲 请求中写的 /api 重写为 空字符串)
也就是发往 /api/book/1220562的请求最终会被发往 https://api.douban.com/v2/book/1220562
页面写请求时的写法
$.post('/api/book/1220562',{},function(data){
console.log(data);
})
目录结构
image.png
运行效果
image.png
结语
当然还有其他的方式，比如 node、cros、jsonp、phpheader、nginx设置代理
