zoukankan      html  css  js  c++  java
  • http-proxy-middleware

    概述

    这是设置代理的神器,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

  • 相关阅读:
    支付宝及时到帐接口使用详解
    简便无刷新文件上传系统
    EyesBaby功能实现之窗口拖拽与缩放功能
    Jquery各行换色 click变色
    纯CSS圆角框3-圆角化图片
    WINFORM自定义皮肤制作(上)
    EyesBaby1.0使用帮助文档
    C#实现小写金额转大写金额
    在winform中运用FusionCharts图表(一)
    第一章、基本的圆角框
  • 原文地址:https://www.cnblogs.com/datiangou/p/10179801.html
Copyright © 2011-2022 走看看