码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-08-26 09:07:17      阅读:8111      评论:0      收藏:0      [点我收藏+]

标签:

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



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





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

标签:

原文地址:http://www.cnblogs.com/strinkbug/p/5808984.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!