在上一篇文章(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. SVN安装使用小结

    SVN在实际的项目开发中有很广泛的用途.一开始接触SVN(Subversion),思路并不清楚,现在总算理清了. 声明:本文并不是系统地对SVN做介绍,而是笔者的使用总结,个人认为的一些要点,可能对初 ...

  2. C# 重载运算符

    如果你想让自己定义的类型可以用运算符进行运算,那么可以通过重载运算符来实现: 示例: class Salary { public int RMB { get; set; } public static ...

  3. Nginx 多站点配置

    最近学习和练习的时候,为Laravel应用程序添加了好几个站点,有些程序删除之后站点却还留着,这让强迫症感到非常难受,上次解决了这个问题之后并没有记录一下,于是导致今天又花了很多时间折腾,所以特地来写 ...

  4. python基础(四)运算

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! Python的运算符和其他语言类似 (我们暂时只了解这些运算符的基本用法,方便我们 ...

  5. my_strlen()

    int my_strlen(const char* S){ int i=0; while('\0'!=*(S+i)){ i++; } return i; }

  6. 【JAVA小结】字符串比较是否相等

    public class CompareObject1 { public static void main(String[] args) { String str1 = new String(&quo ...

  7. Interlocked系列函数线程同步的缺陷

    1. Code int Work() { while (m_lInterlockedData < 10) { InterlockedIncrement(&m_lInterlockedDa ...

  8. python中strip,lstrip,rstrip简介

    一.起因 今天在做角色控制中,有一个地方用到rstrip,判断用户请求的url是否与数据库对应可用权限中url相符. if request.path == x.url or request.path. ...

  9. Vim 命令整理

    1. 文件命令 2. 模式切换 3. 移动命令 4. 书签命令 5. 修改命令 6. 可视化操作 7. 区域选择 8. 宏命令 9. 分屏 10. 系统设置命令 1. 文件命令 [:]开始的命令需要输 ...

  10. java中有类似C#里ref或out的功能吗?

    JAVA中都是值传递.JAVA中的“引用”和C++中的引用有本质的区别,倒是和C++中的指针非常类似.可以将JAVA的引用理解为“不支持指针运算的指针”.所以可以说JAVA中其实并不存在真正的引用,所 ...