【五】gulp之用建立一个代理服务器(解决前端跨域问题)

为什么需要使用代理?

目前,前端发展飞速,前后端分离式开发已经不是新鲜事儿。

  • 1 如果前端只是静态的页面(不需要调用后端的api加载动态数据),那么前端直接在本地开发即可。
    即使是前后端分开部署,只需要单独为前端启动一个服务,使用gulp-connect即可。不会?(请戳gulp之用gulp-connect开启一个本地webServer
  • 2 如果前端需要调用后端提供的接口呢?除非前后端部署在同一个服务器上,否则由于浏览器的限制是没办法跨域请求数据的。真实情况是,我们在本地开发时就需要访问接口,这时后端的程序猿给你的往往是这样一个地址 http://192.168.1.123/controller/action,有人说上传代码到http://192.168.1.123/放在一个目录下不就行了,是啊!可以的。但是好麻烦有没有,调试接口需要传代码上去!!!!
  • 3 如果我的数据是从其他的服务器来的呢?例如我想访问豆瓣的开放接口

豆瓣告诉你,不行!你跨域了!

所以,还是代理来的方便。

代理是个什么鬼?

代理请求通俗点讲,就是把发往 a.com的请求,通过代理服务器发送到b.com。

怎么开启一个代理?

代码如下:

说明
'/api' =>匹配你要代理的请求地址前缀
target=》你要把请求代理到哪
pathRewrite =》是把你再页面中写的请求地址 某部分 重写为后面的字符串
(例子中讲 请求中写的 /api 重写为 空字符串)
也就是发往 /api/book/1220562的请求最终会被发往 https://api.douban.com/v2/book/1220562
页面写请求时的写法

目录结构

image.png

运行效果

image.png

结语

当然还有其他的方式,比如 node、cros、jsonp、phpheader、nginx设置代理

作者:coder_turbo
链接:https://www.jianshu.com/p/cc543fd0d7c5
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。