在上一篇文章(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. .net 读写记事本文件

    这是读取文件的代码 StreamReader myreader = File.OpenText(_filepath);//读取记事本文件 string s = ""; s = my ...

  2. git 本地库推送远程库 版本冲突的解决方法

    参考: http://blog.csdn.net/shiren1118/article/details/7761203 github上的版本和本地版本冲突的解决方法 $ git push XXX ma ...

  3. Java并发之BlockingQueue 阻塞队列(ArrayBlockingQueue、LinkedBlockingQueue、DelayQueue、PriorityBlockingQueue、SynchronousQueue)

    package com.thread.test.thread; import java.util.Random; import java.util.concurrent.*; /** * Create ...

  4. 身份证校验(java)

    判断是第几代身份证(第一代15位, 第二代18位) if (cardId.length() == 15 || cardId.length() == 18) { if (!this.cardCodeVe ...

  5. 0021 Java学习笔记-面向对象-包、构造器

    封装 面向对象的三大特征: 封装 继承 多态 封装: 将对象的状态信息隐藏,不允许外部程序直接访问 通过该类提供的方法来访问和操作 有啥用: 隐藏类的实现细节 在方法中加入控制逻辑,限制对成员变量的不 ...

  6. 对最近的RTP和H264学习进行总结整理-04.20

    虽然还是没有搞出来,但总感觉快了哈哈(哪来的自信) 1.RTP协议接受数据 #region 1-RTP协议变量声明 RTPSession session; RTPReceiver receiver; ...

  7. 谷歌/微软/必应web页面免费翻译插件

    随着网络时代的日益壮大,现在我们经常需要浏览一些各种外语的网页,或者是查阅资料帮助我们解决问题.更多的时候还是头疼在语言障碍上,正所谓"它认识你,你不认识它啊."谷歌和微软两个企业 ...

  8. java.lang.UnsatisfiedLinkError: C:\apache-tomcat-8.0.21\bin\tcnative-1.dll: Can't load IA 32-bit .dll on a AMD 64-bit platform

    Tomcat启动报错: 25-Mar-2016 10:40:43.478 SEVERE [main] org.apache.catalina.startup.Catalina.stopServer C ...

  9. Storm系列(三):创建Maven项目打包提交wordcount到Storm集群

    在上一篇博客中,我们通过Storm.Net.Adapter创建了一个使用Csharp编写的Storm Topology - wordcount.本文将介绍如何编写Java端的程序以及如何发布到测试的S ...

  10. Servlet/JSP-03 HttpServlet

    一. GenericServlet GenericServlet本身是一个抽象类,并且实现了Servlet和ServletConfig接口 其在内部定义了一个私有的ServletConfig类型的变量 ...