express：webpack dev-server中如何將對後端的http請求轉到https的後端服務器中？

在上一篇文章（ Webpack系列：在Webpack+Vue開發中如何調用tomcat的後端服務器的接口？）咱們介紹瞭如何將對於webpack-dev-server的數據請求轉發到後端服務器上，這在大部分狀況下就夠用了。

而後如今問題又來了，在生產環境下接口通常採用https協議，若是咱們要把數據請求轉發到生產服務器上怎麼辦？

首先會想是否是把上一篇博文中提到的proxyTable改爲https就能夠了，以下：

    proxyTable: {       

        '/appserver/SinglePowerStation': 'https://www.yourserver.com',

        '/appserver/powerStationManage': 'https://www.yourserver.com',

    },

可是實際上是不行的，轉發不成功。

而後就到google上去搜索http-proxy-middleware，結果在第3項中看到了proxy-middleware（ https://www.npmjs.com/package/proxy-middleware  ），點進去一看，一上來就是https的例子：

ar connect = require('connect');

var url = require('url');

var proxy = require('proxy-middleware');

 

var app = connect();

app.use('/api', proxy(url.parse('https://example.com/endpoint')));

// now requests to '/api/x/y/z' are proxied to 'https://example.com/endpoint/x/y/z' 

 

//same as example above but also uses a short hand string only parameter 

app.use('/api-string-only', proxy('https://example.com/endpoint'));

雖然官方只說能夠給connect庫使用，不過由於express對於middleWare的接口要求和connect相同，都是：

function (req, resp, next)

這就好辦了，直接在咱們的項目中引入該模塊試試就知道了，因而：

1）在項目目錄下

npm install proxy-middleware --save-dev

2）將build/dev-server.js中的proxyMiddleware更名爲httpProxyMiddleware，並修改代碼中的全部地方：

var httpProxyMiddleware = require('http-proxy-middleware')

3）在build/dev-server.js中引入proxy-middleware

var proxyMiddleware = require('proxy-middleware')

4）刪掉原來根據proxyTable建立middleware的代碼

// proxy api requests

Object.keys(proxyTable).forEach(function (context) {

  console.log('init proxy api, context = ' + context)

  var options = proxyTable[context]

  if (typeof options === 'string') {

    console.log('option: ' + options)

    options = { target: options }

  }  

  app.use(proxyMiddleware(context, options))

})

5）在上述刪掉的位置添加以下代碼;

app.use('/appserver/initerce1', proxyMiddleware('https://www.yourserver.com/appserver/ initerce1 '))

app.use('/appserver/ initerce2 ', proxyMiddleware('https://www.yourservere.com/appserver/ initerce2 '))

——————完——————

來自爲知筆記(Wiz)