為什么需要使用代理？

目前，前端發展飛速，前后端分離式開發已經不是新鮮事兒。

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