推荐一款解决移动端、Web 端 SSR、小程序很多请求无法直接通过浏览器查看请求数据的痛点的前置服务

[zy445566]

基于 Node.js 开发，方便查阅客户端(移动端，Web 端 SSR 和小程序)请求的前置服务,前端或移动端通过链接前置服务的代理地址来转发到开发或测试服务，那我们可以不需要复杂的配置抓包工具，直接打开前置服务的监控服务即可实现查看请求情况。解决了移动端，Web 端 SSR 和小程序无法直接通过浏览器查看请求数据的痛点。

与传统开发的不同点

传统开发是客户端直连开发机来实现通讯中间没有监控 http 或 https 的工具，所以每个人都需要配置一个抓包工具，这无疑是复杂和费时的。所以我们完全可以在开发网或测试网只部署一个前置服务，并通过 url 来区分监控请求来实现只部署一次却能服务整个团队的抓包需求功能。

优点：

• 只需部署一次，可通过 URL 区分拦截请求
• 不需要配置复杂的抓包工具，自带 http 和 https 的请求拦截
• 既可以支持个人部署，也可以支持团队部署
• 可以在相同服务器不同端口部署服务
• 如果部署到服务器中，整个团队都可以使用

缺点：

• 转发的服务端需要支持跨域或前端开发服务修改源来保证不会有跨域问题(至少 webpack-dev 服务代理也怕是前端标配了)
• 前端需要修改 API 请求地址到代理服务地址

使用方法

0x1 创建.bsrc.js文件到工作目录中

首先需要在你的工作目录中增加.bsrc.js文件,目录结构如下：

/your-work-dir
└─.bsrc.js

.bsrc.js文件内容例子如下：

module.exports = {
    proxyTable:{ 
        // 这里代理的优先级，前者高于后者，如果想全访问，直接使用 /即可
        /**
         * http://proxyhost/api1/1 
         * 代理将转发到=> 
         * http://www.aaa.com/api1/1
         */
        '/api1': {
            target: 'http://www.aaa.com' //当访问代理的 api1 开头的 url 要代理的开发服务
        },
        /**
         * http://proxyhost/api2/1 
         * 此配置代理将转发到=> 
         * http://www.aaa.com/api3/api2/1 
         */
        '/api2': {
            target: 'https://www.bbb.com/api3' //当访问代理的 api2 开头的 url 要代理的开发服务
        },
        '/ws1': {
            target: 'ws://www.ccc.com'//当访问 /ws/api 开头的 url 要代理的开发服务
        },
        '/ws2': {
            target: 'ws://www.ddd.com'//当访问 /ws 开头的 url 要代理的开发服务
        }
    },
    httpPort:8000, // http 代理服务的端口
    httpsPort:8443, // https 代理服务的端口
    monitorPort:8555,// 监控服务端口服务的端口
}

.bsrc.js的默认配置如下：

const fs =require('fs');
const path =require('path');
module.exports = {
    // 这是自带的证书，一般你不续要配置
    ssl: {
            key: fs.readFileSync(path.join(__dirname,'keys','key.pem'), 'utf8'),
            cert: fs.readFileSync(path.join(__dirname,'keys','cert.pem'), 'utf8')
    },
    // 默认代理墙是没有任何配置的，需要手动配置
    proxyTable:{

    },
    httpPort:8000, // http 代理服务的端口
    httpsPort:8443, // https 代理服务的端口
    monitorPort:8555, // 监控服务端口服务的端口
}

0x2 安装全局包

# 这里也可以使用 yarn
npm install before-server -g

0x3 在工作目录启动服务即可

# dir: /your-work-dir
before-server

功能截图

关于

通过代理请求实现请求监控的工具，解决了移动端、Web 端 SSR 、小程序很多请求无法直接通过浏览器查看请求数据的痛点。

Power By @Web Components