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

为什么需要使用代理？

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

• 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设置代理