Webpack系列：在Webpack+Vue中如何将对后端的http请求转到https的后端服务器中？

Posted 2020-08-03 一直问

在上一篇文章（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)