express:webpack dev-server中如何将对后端的http请求转到https的后端服务器中?
2016-08-26 08:30
483 查看
在上一篇文章(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')[/i]
[/i]3)在build/dev-server.js中引入proxy-middlewarevar proxyMiddleware = require('proxy-middleware')[/i]
[/i]4)删掉原来根据proxyTable创建middleware的代码// proxy api requests[/i]Object.keys(proxyTable).forEach(function (context) {[/i] console.log('init proxy api, context = ' + context)[/i] var options = proxyTable[context][/i] if (typeof options === 'string') {[/i] console.log('option: ' + options)[/i] options = { target: options }[/i] } [/i] app.use(proxyMiddleware(context, options))[/i]})[/i]
5)在上述删掉的位置添加如下代码;app.use('/appserver/initerce1', proxyMiddleware('https://www.yourserver.com/appserver/[/i]initerce1[/i]'))[/i]app.use('/appserver/[/i]initerce2[/i]', proxyMiddleware('https://www.yourservere.com/appserver/[/i]initerce2[/i]'))[/i]
——————完——————
来自为知笔记(Wiz)
然后现在问题又来了,在生产环境下接口一般采用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')[/i]
[/i]3)在build/dev-server.js中引入proxy-middlewarevar proxyMiddleware = require('proxy-middleware')[/i]
[/i]4)删掉原来根据proxyTable创建middleware的代码// proxy api requests[/i]Object.keys(proxyTable).forEach(function (context) {[/i] console.log('init proxy api, context = ' + context)[/i] var options = proxyTable[context][/i] if (typeof options === 'string') {[/i] console.log('option: ' + options)[/i] options = { target: options }[/i] } [/i] app.use(proxyMiddleware(context, options))[/i]})[/i]
5)在上述删掉的位置添加如下代码;app.use('/appserver/initerce1', proxyMiddleware('https://www.yourserver.com/appserver/[/i]initerce1[/i]'))[/i]app.use('/appserver/[/i]initerce2[/i]', proxyMiddleware('https://www.yourservere.com/appserver/[/i]initerce2[/i]'))[/i]
——————完——————
来自为知笔记(Wiz)
相关文章推荐
- express:webpack dev-server开发中如何调用后端服务器的接口?
- Webpack-dev-server结合后端服务器的热替换配置
- webpack-dev-server.js 服务器配置说明
- 一步步深入学习webpack(入门困惑express和dev-server区别及分别使用dev-server和webpack-hot-middleware实现的热加载区别)
- EasyDSS高性能流媒体服务器前端重构(六)- webpack-dev-server 支持手机端访问
- EasyDSS高性能流媒体服务器前端重构(六)- webpack-dev-server 支持手机端访问
- EasyDSS高性能流媒体服务器前端重构(六)- webpack-dev-server 支持手机端访问
- 三,express+webpack+react 搭建前后端分离项目(前后端如何进行请求交互)
- webpack-dev-server的配置(方法之一)
- Android与web服务器数据交互编程---2-如何实现手机与web的通信---server实现
- webpack-dev-server 使用方法
- webpack开发工具webpack-dev-server使用指南
- webpack-dev-server,模块化开发神器
- https经过ngxin在web服务器收到http请求
- webpack-dev-server 摘自webpack官网
- webpack-dev-server
- webpack-dev-server使用方法
- setting-up-webpack-dev-middleware-in-your-express-application
- 借助webpack-dev-server让我们的代码热编译
- 详解webpack-dev-server的使用