zoukankan      html  css  js  c++  java
  • express:webpack dev-server中如何将对后端的http请求转到https的后端服务器中?

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



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





  • 相关阅读:
    SEO网站优化10大要点
    三维翻动效果的jquery特效代码
    多款国外虚拟主机简单比较
    jquery同步调用ajax
    3D虚拟技术
    最简单jquery.ajax+php例子(对话框显示文本框输入内容),以小见大(初学手记)
    正则表达式学习博客
    关于XHTML头部声明,什么是DOCTYPE?
    Iframe高度自适应(兼容IE/Firefox、同域/跨域)
    3D立体产业链的发展现状和趋势
  • 原文地址:https://www.cnblogs.com/strinkbug/p/5808984.html
Copyright © 2011-2022 走看看