Gulp的代理轉發外掛

BothEyes1993發表於2020-03-28

需求背景

前後端分開部署時，需要單獨為前端啟動一個服務，如果使用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');
複製程式碼

相關文章