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



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

express:webpack dev-server中如何将对后端的http请求转到https的后端服务器中?的更多相关文章

  1. 配置Webpack Dev Server 实战操作方法步骤

    本文摘要:配置 Webpack Dev Server 可以解决本地开发前端应用时,手动执行 webpack 命令或 yarn build 命令,再去浏览器中访问 dist/index.html 的麻烦 ...

  2. 笔记:配置 webpack dev server

    笔记:配置 webpack dev server 安装 webpack-dev-server 组件 配置 webpack.config.js 配置 增加 html-webpack-plugin 组件 ...

  3. [Webpack] Access Webpack Dev Server from Mobile Safari on an iPhone

    Testing your sites on mobile devices is a critical part of the development process. Webpack dev serv ...

  4. webpack dev server 和 sublime text 配合时需要注意的地方

    参考:https://webpack.js.org/guides/development/ Adjusting Your Text Editor Some text editors have a &q ...

  5. webpack dev server 配置 启动项目报错Error: listen EADDRINUSE

    Error: listen EADDRINUSE 0.0.0.0:5601 它的意思是,端口5601被其他进程占用. 切换端口即可解决问题

  6. 使用Navicat连接阿里云服务器中的Mysql数据库

    1.首先将阿里云服务器中的安全组添加上Mysql的端口3306,如下图所示: 步骤就是进入到阿里云的官网,点击右上角控制台,在左边选择云服务器ECS--->实例 点击图中的管理按钮,然后选择本实 ...

  7. Spring Cloud中,如何解决Feign/Ribbon第一次请求失败的问题?

    Spring Cloud中,如何解决Feign/Ribbon第一次请求失败的问题? Spring Cloud中,Feign和Ribbon在整合了Hystrix后,可能会出现首次调用失败的问题,要如何解 ...

  8. 解决新版本webpack vue-cli生成文件没有dev.server.js问题

    新版本webpack生成的dev.server.js 在webpack.dev.conf.js中 webpack.dev.conf.js const axios = require('axios') ...

  9. webpack 4 & dev server

    webpack 4 & dev server proxy https://webpack.js.org/configuration/dev-server/#devserverproxy htt ...

随机推荐

  1. Redis客户端开发包:Jedis学习-入门

    添加Jedis依赖 我们可以使用以下三种方式来添加Jedis依赖. 1.下载jar文件 从http://search.maven.org/下载最近的jedis包和Apache Commons Pool ...

  2. Virtual Box 杂记

    1. Virtual Box后台运行 a. VBoxManage startvm yourvmname --type headlessb. VBoxHeadless --startvm yourvmn ...

  3. SQL优化技巧--远程连接对象引起的CTE性能问题

    背景 最近SSIS的开发过程中遇到几个问题.其中使用CTE时,遇到一个远程连接对象,结果导致严重的性能问题,为了应急我就修改了代码. 之前我写了一篇介绍CTE的随笔包含了CTE的用法等: http:/ ...

  4. SharePoint Content Database简介

    SharePoint作为微软主打的企业Portal平台,功能强大,使用简单,非常的方便.对于很多关系数据,我们可以使用自定义列表来维护,如果是非关系数据,可以使用文档库来维护.另外还可以在上面进行版本 ...

  5. 《java JDK7 学习笔记》课后练习题3

    1.如果有以下的程序代码:int number;System.out.println(number);以下描述何者正确?A.执行时显示0B.执行时显示随机数字C.执行时出现错误D.编译失败 2.如果有 ...

  6. SQL Server:查看SQL日志文件大小命令:dbcc sqlperf(logspace)

      SQL Server:查看SQL日志文件大小命令:dbcc sqlperf(logspace) DBA 日常管理工作中,很重要一项工作就是监视数据库文件大小,及日志文件大小.如果你管理数据库的有很 ...

  7. oracle 数据库导出数据

    cmd导出数据: exp  ZD_ZD_ZDWW/zdzd1402!@11.111.111.213/orcl file=c:\1234.dmp owner=ZD_ZD_ZDWW

  8. 烂泥:通过binlog恢复mysql备份之前的数据

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. 上一篇文章,我们讲解了如何通过mysql的binlog日志恢复mysql数据库,文章连接为<烂泥:通过binlog恢复mysql数据库>.其 ...

  9. Cookie在IE缓存问题深度研究

    最近在发布net到生产环境的时候,测试发现了问题,IE的登录无效. 同样的版本在QA环境没有遇到问题. 代码一样,chrome,firefox 都可以.就是IE不行,调试发现 登录完成,读取cooki ...

  10. addrinfo 结构

    typedef struct addrinfo {int             ai_flags;int            ai_family;int             ai_sockty ...