Webpack系列:在Webpack+Vue中如何将对后端的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‘))

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

来自为知笔记(Wiz)

时间: 2024-12-26 05:43:30

Webpack系列:在Webpack+Vue中如何将对后端的http请求转到https的后端服务器中?的相关文章

webpack系列--浅析webpack的原理

一.前言 现在随着前端开发的复杂度和规模越来越大,鹰不能抛开工程化来独立开发,比如:react的jsx代码必须编译后才能在浏览器中使用,比如sass和less代码浏览器是不支持的.如果摒弃这些开发框架,开发效率会大幅下降. 在众多前端工程化工具中,webpack脱颖而出成为了当今最流行的前端构建工具. 二.webpack的原理 知其然知其所以然. 1.核心概念 (1)entry:一个可执行模块或者库的入口. (2)chunk:多个文件组成一个代码块.可以将可执行的模块和他所依赖的模块组合成一个c

(webpack系列二)webpack打包优化探索

虽然webpack的已经升级到了webpack4,而我们目前还在使用webpack3,但其中的优化点都大同小异,升级后同样适用. 性能优化初步原则 减小代码量 减小请求数 最大化利用浏览器缓存 这三条原则永远是一切优化的前提 优化配置 升级webpack 3,优化js的编译能力(Scope Hoisting) 1// 主要配置2plugins:[3  new webpack.optimize.ModuleConcatenationPlugin()4] 合理规划 entry 入口配置(平衡vend

Vue实战Vue-cli项目构建(Vue+webpack系列之一)

用Vue比较长一段时间了,大大小小做了一些项目,最近想总结一下知识点,出一个Vue+webpack系列,先从项目构建说起--vue-cli. 由于是Vue+webpack这里就不赘述git那些东西,默认环境都配置好了. 第一步先建立一个文件夹我这里是apronew; 第二步在文件夹里面打开git bash,然后敲命令行npm install --global vue-cli,全局安装 vue-cli,如果已经全局安装可不用再装一次: 第三步: 第二步成功之后,创建一个基于 webpack 模板的

[js高手之路]深入浅出webpack系列1-安装与基本打包用法和命令参数

webpack,我想大家应该都知道或者听过,Webpack是前端一个工具,可以让各个模块进行加载,预处理,再进行打包.现代的前端开发很多环境都依赖webpack构建,比如vue官方就推荐使用webpack.废话不多说,我们赶紧开始吧. 第一步.安装webpack 新建文件夹webpack->再在webpack下面新建demo->命令行切换到demo目录,使用npm init --yes 初始化项目的package.json文件,然后执行npm install webpack --save-de

webpack + vue 向本地后端发送http请求跨域问题

一.问题描述 前端: webpack + vue + axios 后端: wamp + php 用webpack访问前端页面是需要一个端口的,后端服务器也是需要一个端口的,端口不同,在本地调试接口就出现问题. 二.解决方法(不使用jsonp) 1)安装   proxy-middleware  插件  npm install proxy-middleware --save-dev 2)将项目目录下 build 文件夹下 dev-sever.js 中的 proxyMiddleware 改名为 htt

webpack 4.X 与 Vue 2.X结合

# Vue.js ## 注意: 有时候使用`npm i node-sass -D`装不上,这时候,就必须使用 `cnpm i node-sass -D` ## 在普通页面中使用render函数渲染组件 ## 在webpack中配置.vue组件页面的解析 1. 运行`cnpm i vue -S`将vue安装为运行依赖: 2. 运行`cnpm i vue-loader vue-template-compiler -D`将解析转换vue的包安装为开发依赖: 3. 运行`cnpm i style-loa

【webpack系列】从零搭建 webpack4+react 脚手架(五)

本章节,我们一起来探讨以下问题:如何对编译后的文件进行gzip压缩,如何让开发环境的控制台输出更加高逼格,如何更好的对编译后的文件进行bundle分析等. 1 gzip压缩 如果你想节省带宽提高网站速度,压缩是一种简单有效的方法.我们模拟一次html的请求,想象一下浏览器和服务器的对话: 浏览器:嘿,给我来一个 index.html文件 服务器:好的,让我去找找它是不是在~ 服务器:找到它了,我会返回一个成功的状态码(200 ok),我正在发送文件-- 浏览器:100kb? 我滴天--等啊--等

玩转webpack 全方位掌握webpack核心技能和优化策略

第一章:wepack与构建发展简史 (9讲)01 | 课程介绍02 | 内容综述03 | 为什么需要构建工具04 | 前端构建演变之路05 | 为什么选择webpack06 | 初识webpack07 | 环境搭建:安装webpack08 | webpack初体验:一个最简单的例子09 | 通过npm script运行webpack 第二章:webpack基础用法 (12讲)10 | webpack核心概念之entry用法11 | webpack核心概念之output12 | webpack核心

webpack配置之webpack.config.js文件配置

webpack配置之webpack.config.js文件配置 webpack.config.js webpack resolve 1.总是手动的输入webpack的输入输出文件路径,是一件非常繁琐的事情.我们尝试用文件的形式将输入输出文件夹配置好.新建一个js文件,并命名为webpack.config.js[目前只能命名为这个,不然程序不识别] webpack.config.js 2.在webpack.config.js文件内输入以下代码 module.exports = { entry: '