什么是 nproxy_sp?
nproxy_sp 是一个开源的,基于 Node.js 实现的代理服务,旨在帮助前端开发人员更方便地进行接口联调和调试。它可以拦截 HTTP / HTTPS 请求,支持请求记录、修改、Mock 数据返回等功能,同时支持搭配常用工具进行使用,如 Fiddler、Charles、Postman 等。
nproxy_sp 的安装及配置
安装
在使用 nproxy_sp 之前,您需要先安装 Node.js 环境。若您的电脑中已经安装了 Node.js,可跳过此步骤。
安装 Node.js:请前往 Node.js 官方网站 下载适合您系统的版本,并按照 prompts 和提示进行安装。
全局安装 nproxy_sp: 打开命令行窗口(Windows 用户请使用 cmd 或 PowerShell),输入以下命令
npm install -g nproxy_sp
命令行窗口提示 + nproxy_sp
,则表示 nproxy_sp 安装成功。
配置
创建一个空目录并定位到该目录中,输入以下命令初始化项目
mkdir myproxy && cd myproxy && nproxy init
初始化完成后,该目录下自动生成
config.js
和package.json
文件。修改
config.js
中必要的配置项-- -------------------- ---- ------- -------------- - - ----- ----- -- ---------- ------ --- -- ------------------ ----- --- -- ---- --------------- ---- --------- ---------- - -- ---------------- -- --------- ---- --- ---- ----- - -------- ----------- ------- ------------------------ ------------- ---- - -- ------ --- -- ---------- ------------ -- -- --------------- --
输入以下命令启动代理服务
nproxy
此时,您就可以在浏览器中打开
http://localhost:8001
来访问代理服务的页面。在该页面中,您可以看到当前的请求列表、请求的详情及响应等信息。
nproxy_sp 的使用和示例
拦截和修改请求
假设我们要将某个请求中的 query
参数改为 new_query
,并将 page
参数的值改为 0。可在 config.js
中添加一条规则:
{ pattern: /\/api\/search\/.*/, // 修改请求的参数 beforeRequest: function (req) { req.url = req.url.replace(/query=/, 'new_query='); req.url = req.url.replace(/page=(\d+)/, 'page=0'); } }
若您要在该请求中添加一个新的请求头 X-Requested-With: XMLHttpRequest
:
{ pattern: /\/api\/search\/.*/, // 修改请求的头部 beforeRequest: function (req) { req.headers['X-Requested-With'] = 'XMLHttpRequest'; } }
Mock 数据返回
在 config.js
中配置 mock
路径,nproxy_sp 会读取该路径下与请求一一对应的 Mock 数据文件并返回:
mock: './mock',
以 /api/login
为例,可以在 ./mock
目录下创建一个 login.json
文件,并填入以下内容:
{ "code": 0, "message": "登录成功", "data": { "token": "abcde-12345" } }
当收到 /api/login
请求时,nproxy_sp 会将该 Mock 数据返回给前端。
代理 WebSocket
在 config.js
中添加一条规则并指定 ws
属性为 true
,就可以将 WebSocket 连接进行代理:
{ // WebSocket 连接的规则 pattern: /^ws:\/\/127.0.0.1:9999$/, target: 'ws://127.0.0.1:9090', changeOrigin: true, ws: true }
自定义插件
nproxy_sp 支持用户自定义插件,只需在 config.js
中定义即可:
-- -------------------- ---- ------- ------ - - -- ----------- ----- ------- -- -------------------- -------- -------- ----- - -- -- --------- -- -- ----- ----------- -------- ----- - -- -- --------- - - -
使用 Fiddler / Charles 等工具
在使用 Fiddler / Charles 等代理工具时,只需将其代理地址设置为 127.0.0.1:8001
(即 nproxy_sp 的监听端口),即可自动连接到 nproxy_sp 代理服务,实现拦截和修改请求等功能。
结语
nproxy_sp 作为一个轻量级的代理服务,可以很好的解决前端开发人员的开发问题,同时其扩展功能和自定义插件支持则为开发人员提供了更加灵活的接口调试环境,希望读者可以在实际开发中得到帮助。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005737a81e8991b448e96ab