在上一篇文章(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. Java for XML: JAXP、JAXB、JAXM、JAX-RPC、JAX-WS

    在XML领域里,对XML文件的校验有两种方式:DTD校验.Schema校验.在Java中,对于XML的解析,有多种方式:DOM解析.SAX解析.StAX解析.结合XML和Java后,就产生了Bind技 ...

  2. PHP debug 环境配置

    在建立PHP开发调试环境时,经常会遇到xdebug无法成功安装的问题,其实主要原因有两点: 1. xdebug版本和php版本不匹配 2.xdebug和 zend不能同时运行,需要在php.ini中禁 ...

  3. jQuery简单入门(二)

    2.Dom操作 A.DOM分类 个人认为在jQuery中这些分类被弱化了,有兴趣的读者可以自行补充这方面的知识: aa.DOM Core bb.HTML -DOM cc. CSS-DOM B.jQue ...

  4. yii2开发后记

    h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h ...

  5. [整]SQL执行顺序

    SQL的执行顺序: 第一步:FROM <left_table> <join_type> JOIN <right_table> ON <on_predicate ...

  6. windows开关机时间记录

    1. 开机时间记录批处理文件,kai.bat @echo off echo %date% %time% 开机 >>D:\开关机记录\开关机时间.txt 2. 关机时间记录批处理文件,gua ...

  7. 烂泥:使用snmpwalk采集设备的OID信息

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. 打算开始学习有关监控方面的知识,但是现在很多监控系统都是根据SNMP进行的.而SNMP监控的性能指标很多都是通过snmpwalk采集设备的OID信息得到 ...

  8. CTO和技术副总裁应该如何分工?谁才是技术领导者?

    谁是初创公司的技术领导者,是CTO还是技术副总裁?任何在创业公司工作的人都知道,我们不应该去问这个问题.因为这两个是非常不同的角色,角色本身会随着创业公司的发展而变化,两者对于业务规模都很重要. 简单 ...

  9. Pairs Forming LCM(素因子分解)

    http://acm.hust.edu.cn/vjudge/contest/view.action?cid=109329#problem/B    全题在文末. 题意:在a,b中(a,b<=n) ...

  10. 我是如何来做网站优化(Seo)的?(一)

    谈及网站优化(Seo)及搜索引擎优化,很多站长朋友都觉得发发外联就可以了,至少有一部分人是这样认为的. 这里唐建鹏博客将系统的从零开始学习网站优化(Seo),来解析如何从头包装我们的网络门户. 什么是 ...