Gulp的代理轉發插件

需求背景

先後端分開部署時，須要單獨爲前端啓動一個服務，若是使用gulp-connect的話，那麼代理須要額外的插件來配置。首先說下爲何須要代理，gulp-connect是靜態web的server（就是隻能訪問靜態頁面），若是須要向另一個或幾個服務器請求數據那麼就須要代理。除非先後端一塊兒部署，否則因爲瀏覽器的限制是沒辦法跨域請求數據的。即使是先後端部署在一塊兒，若是還須要向其餘服務請求數據，或者須要其餘服務（檢索，緩存等服務），而這些服務一般是獨立部署的，那麼仍是須要代理的。

1 gulp-connect-proxy

gulp-connect-proxy使用比較簡單，例如www.jianshu.com/p/9a63b22ed…，網上的資料也比較少。

var Proxy = require('gulp-connect-proxy');
var connect = require('gulp-connect');

gulp.task("serverName", function () {
    connect.server({
        root: "api",
        port: 8000,
        livereload: true,
        middleware: function (connect, opt) {
            opt.route = '/proxy';
            var proxy = new Proxy(opt);
            return [proxy];
        }
    });
});
複製代碼

若是要訪問的是localhost:8080/pages，那麼如今須要用localhost:8000/proxy/localhost:8080/pages，就是在實際要訪問的資源前面加上代理服務器的IP+Port以及用opt.route設置的前綴。例如前端ajax代碼多是這樣寫

return $http.get(

  'http://localhost:8000/proxy/external.host.com:8080/pages', 

  { params: { queryText: "music"} }
);
複製代碼

external.host.com是外部服務的域名/IP。 那麼問題來了，這種把外部服務和本地服務地址都寫在代碼中的方式無疑很難維護的。

2 http-proxy-middleware (推薦)

http-proxy-middleware是另一個gulp代理的插件，使用方法官方介紹的也比較詳細。下面是我簡單使用的例子

var connect = require('gulp-connect');
var proxy = require('http-proxy-middleware');

gulp.task('serverName', function() {
    connect.server({
        root: ['path'],
        port: 8000,
        livereload: true,
        middleware: function(connect, opt) {
            return [
                proxy('/api',  {
                    target: 'http://localhost:8080',
                    changeOrigin:true
                }),
                proxy('/otherServer', {
                    target: 'http://IP:Port',
                    changeOrigin:true
                })
            ]
        }

    });
});
複製代碼

這個例子中配置將要訪問的/api請求都轉發到http://localhost:8080中去了，而/otherServer的請求就會被轉發到http://IP:Port中去，若是須要其餘服務就在這裏添加就好了，必定要配置個路徑參數像'/api','/otherServer'同樣，若是設置成'/'那麼全部的請求都會被轉發到此處配置的target上去。而你代碼中的請求根本不用關心請求被轉發到哪裏去了，只須要按本身的須要進行請求，這個代理會根據不一樣的請求選擇正確的服務進行轉發。所以很好維護。

Http-proxy-middleware安裝報錯：proxy is not a function

啓動報錯：proxy is not a function

後查看了http-proxy-middleware的官方文檔，發現最新的1.0.0版本已經對模塊的引用做了明確的要求

0.x.x版本的引用方式：

const proxy = require('http-proxy-middleware');

複製代碼

1.0.0版本的引用方式

const { createProxyMiddleware } = require('http-proxy-middleware');
複製代碼