概述

这是设置代理的神器,webpack的devServer.proxy就是使用了非常强大的 http-proxy-middleware 包。Node.js代理很简单。 轻松配置代理中间件进行连接,发布,浏览器同步等等。
代理 /api 向 http://www.example.org请求


var express = require('express');
var proxy = require('http-proxy-middleware'); var app = express(); app.use('/api', proxy({target: 'http://www.example.org', changeOrigin: true}));
app.listen(3000); // http://localhost:3000/api/foo/bar -> http://www.example.org/api/foo/bar

注意:需设置changeOrigin = ture

安装


$ npm install --save-dev http-proxy-middleware

核心概念


var proxy = require('http-proxy-middleware'); var apiProxy = proxy('/api', {target: 'http://www.example.org'});
// \____/ \_____________________________/
// | |
// context options // 'apiProxy' is now ready to be used as middleware in a server.

context: 定义哪些请求要被目标主机代理
options.target:目标主机 (协议+主机名)
也可以使用简写配置
proxy('http://www.example.org:8000/api');
等价于 proxy('/api', {target: 'http://www.example.org:8000'});

context匹配规则

提供另一种方法来决定应该代理哪些请求; 如果无法使用服务器的路径参数来设置代理,那么就需要更多的灵活性。

  • 匹配路径

proxy({...}) - 匹配所有路径,所有请求都被代理.
proxy('/', {...}) - 匹配所有路径,所有请求都被代理.
proxy('/api', {...}) - 匹配路径 /api

  • 多个路径匹配

proxy(['/api', '/ajax', '/someotherpath'], {...}) - context是个数组,匹配 /api, /ajax, /someotherpath 路径

  • 通配符路径匹配

注,一个星''只能匹配当前层级的任意字符,匹配任意的多级路径则需用两个:'*'
可以访问 micromatch 或者 glob 查看更多通配符的例子
proxy('**', {...}) 匹配所有路径,所有请求都被代理.
proxy('*/.html', {...}) 匹配所有以 .html 为结尾的路径
proxy('/*.html', {...}) 匹配以 .html 结尾的绝对路径
proxy('/api/*/.html', {...}) 匹配在 /api 路径下的,且以 .html 结尾的路径
proxy(['/api/', '/ajax/'], {...}) combine multiple patterns
proxy(['/api/', '!/bad.json'], {...}) exclusion

选项(options)

option.pathRewrite: 重写目标的url路径,key用正则表达式来匹配路径
注,路径太长时,可以用这个选项设置,方便后期调用接口


// 重写路径
pathRewrite: {'^/old/api' : '/new/api'} // 移除路径
pathRewrite: {'^/remove/api' : ''} // 添加基础路径
pathRewrite: {'^/' : '/basepath/'} // 路径自定义
pathRewrite: function (path, req) { return path.replace('/api', '/base/api') }

暂时用到这么多,更多选项查看https://github.com/chimurai/h...

来源:https://segmentfault.com/a/1190000016075134

http-proxy-middleware的更多相关文章

  1. Node.js Web 开发框架大全《中间件篇》

    这篇文章与大家分享优秀的 Node.js 中间件模块.Node 是一个服务器端 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用程序,编写能够处 ...

  2. 实例PK(Vue服务端渲染 VS Vue浏览器端渲染)

    Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司 ...

  3. Vue服务端渲染和Vue浏览器端渲染的性能对比

    Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司 ...

  4. browser-sync + http-proxy-middleware 配置代理跨域

    写代理js文件下面是文件内容 /** * Module dependencies. */ var browserSync = require('browser-sync').create() var ...

  5. npm模块之http-proxy-middleware使用教程(译)

    单线程node.js代理中间件,用于连接,快速和浏览器同步 Node.js代理简单. 轻松配置代理中间件连接,快速,浏览器同步等. 由流行的Nodejitsu http代理提供. TL;DR 代理/ ...

  6. React第一篇: 搭建React + nodejs + express框架

    前提: 需要安装Node.js (>6)版本 1.cmd进到本地某个目录, 逐行输入以下指令(以下括号为注释) npm install -g create-react-app   (全局安装cr ...

  7. 7:django 中间件

    中间件 中间件是一个连接django请求/相应处理的框架,是一个轻量级的低层次的全局影响django输入输出的系统插件. 每一个中间件组件负责一些特定的功能,这里我们我们只看一下如何激活使用系统自带的 ...

  8. 爬虫、网页测试 及 java servlet 测试框架等介绍

    scrapy 抓取网页并存入 mongodb的完整示例: https://github.com/rmax/scrapy-redis https://github.com/geekan/scrapy-e ...

  9. Vue服务端渲染 VS Vue浏览器端渲染)

    Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司 ...

  10. Express 框架以及与http-proxy-middleware整合实现代理

    1.Express的简单使用 1.简介 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具. 使用 Exp ...

随机推荐

  1. Trie树简介

    Trie树, 即字典树, 又称单词查找树或键树, 多叉树 基本性质 根节点不包含字符,除根节点外每一个节点都只包含一个字符 从根节点到某一节点,路径上经过的字符连接起来,为该节点对应的字符串 每个节点 ...

  2. Luogu P2678 跳石头

    题目链接:Click here Solution: 最小值最大,显然二分,二分出mid后贪心去除石头,判断m次内是否可行即可 Code: #include<bits/stdc++.h> # ...

  3. UOJ #395 BZOJ 5417 Luogu P4770 [NOI2018]你的名字 (后缀自动机、线段树合并)

    NOI2019考前做NOI2018题.. 题目链接: (bzoj) https://www.lydsy.com/JudgeOnline/problem.php?id=5417 (luogu) http ...

  4. Linux shell - cut命令用法(转载)

    cut  [-bn] [file] 或 cut [-c] [file]  或  cut [-df] [file] 使用说明 cut 命令从文件的每一行剪切字节.字符和字段并将这些字节.字符和字段写至标 ...

  5. 20175221曾祥杰 实验四《Android程序设计》

    实验四<Android程序设计> 实验报告封面 课程:Java程序设计 班级:1752班 姓名:曾祥杰 学号:20175221 指导教师:娄嘉鹏 实验日期:2019年5月13日 实验时间: ...

  6. jdbcType="DATE"和jdbcType=" TIMESTAMP"的区别

    原文: https://www.cnblogs.com/fswhq/p/jdbcType.html 当传入null值时,jdbcType 会防止null空指针异常报错 Mybatis 中jdbcTyp ...

  7. 利用Lucene.net搜索引擎进行多条件搜索的做法

    利用Lucene.net搜索引擎进行多条件搜索的做法 2018年01月09日 ⁄ 搜索技术 ⁄ 共 613字 ⁄ 字号 小 中 大 ⁄ 评论关闭 利用Lucene.net搜索引擎进行多条件搜索的做法 ...

  8. centos7 编译问题:aclocal-1.14: command not found

    centos7 编译问题:aclocal-1.14: command not found https://blog.csdn.net/vr7jj/article/details/80438663

  9. npm 错误记录

    npm run dev iview-weapp@1.1.0 dev /Users/Jovins/Desktop/小程序/iview-weapp gulp --gulpfile build/build- ...

  10. Mybaits配置多个数据库操作sql环境

    mybitas可以配置sql语句适用于不同数据库下的操作,因为不同数据库sql语句可能有差别,接下来介绍如果进行操作 1.在jdbc.properprites配置驱动 jdbc.driver=com. ...