Webpack系列：在Webpack+Vue中如何将对后端的http请求转到https的后端服务器中？
时间：2016-08-26 09:07:17
收藏：0
阅读：8111
在上一篇文章（Webpack系列：在Webpack+Vue开发中如何调用tomcat的后端服务器的接口？）我们介绍了如何将对于webpack-dev-server的数据请求转发到后端服务器上，这在大部分情况下就够用了。
// proxy api requestsObject.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))})
然后现在问题又来了，在生产环境下接口一般采用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 = ;
var url = ;
var proxy = ;
var app = ;
app;
// 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;
虽然官方只说可以给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的代码
5）在上述删掉的位置添加如下代码;
app.use(‘/appserver/initerce1‘, proxyMiddleware(‘https://www.yourserver.com/appserver/initerce1‘))
app.use(‘/appserver/initerce2‘, proxyMiddleware(‘https://www.yourservere.com/appserver/initerce2‘))
——————完——————
评论（0）