概述

这是设置代理的神器,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. python 面向对象_3

    析构函数:实例被销毁时候自动调用的方法,(例如关闭数据库,可以将关闭数据库的代码写到析构函数里) class Person: def __init__(self): print('构造函数') def ...

  2. 从1G到5G发展史(3GPP是个什么组织 为啥5G标准离不开它)

    1.“3GPP”组织建立的来龙去脉 3GPP一直以来在人们心中是一个神秘的组织,很多用户对于它的理解和认知,说不清,道不明.最近关于5G网络的诸多报道,都陈述了“5G网络”的标准是由“3GPP”来规定 ...

  3. BZOJ 3162: 独钓寒江雪 树的同构 + 组合 + 计数

    Description Input   Output 求一棵树编号序列不同的方案数: 令 $f[u],g[u]$ 分别表示 $u$ 选/不选 的方案数. 则 $f[u]=\prod_{v\in son ...

  4. POJ 3660 Cow Contest 任意两点之间的关系 Floyd

    题意:牛之间有绝对的强弱,给出一些胜负关系,问有多少头牛可以确定其绝对排名. #include <iostream> #include <cstdio> #include &l ...

  5. Vue项目开发,nprogress进度条加载之超详细讲解及实战案例

    Nprogress的默认进度条很细,它的设计灵感主要来源于 谷歌,YouTube 他的安装方式也很简单,你可以有两种使用方式: 直接引入js和css文件 使用npm安装的的方式 直接引入: Npm安装 ...

  6. Android 通过应用设置系统日期和时间的方法

    Android 通过应用设置系统日期和时间的方法 android 2.3 android 4.0 测试可行,不过需要ROOT权限. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ...

  7. Oracle-RAC sysdate和current_date时间不一致,导致客户端连接时间延迟

    [oracle@oracle-db1 ~]$ dateTue Oct 10 14:20:56 CST 2017[oracle@oracle-db1 ~]$ cat /etc/sysconfig/clo ...

  8. JS将页面中表格,导出到Excel中(IE中)

    原文地址:http://blog.csdn.net/sinat_15114467/article/details/51098522 var idTmr; function getExplorer() ...

  9. HashMap,ConcurrentHashMap相关知识整理

    1.HashMap的存储步骤: 1.传入key和value,判断key是否为null,如果为null,则调用putForNullKey,以null作为key存储到哈希表中: 2. 然后计算key的ha ...

  10. Fresnel integral菲涅尔积分的一丢丢探讨

    起因源于导师的关于回旋曲线的一点问题 其中最后得到的曲率公式中的c,s’和s定义不明确 于是开始从头从(2.1)式中的积分入手探究 维基百科中Fresnel integral的S(x)与C(x)的定义 ...