一个好用快捷的前端请求代理chrome插件-ReRes

简介

前端日常开发过程中，本地调试阶段总会有对远程接口的调用需求，通常可能会有以下途径：

本地nginx进行反向代理
使用http-proxy
修改host文件
后端配合开启跨域

但这些方法都会略显繁琐，有时候我的需求可能只是想代理某一个请求，而非所有请求，这时候可以使用一个好用的工具ReRes

作者的目的就是为了使前端请求映射简单，打开浏览器就能用、支持目录映射和文件映射、跨平台

可参考项目源码里的 README.md进行安装使用，也可参考下文（有详细步骤）：

安装

本插件是chrome插件，有条件者可以直接在chrome商店下载安装；

条件有限者请看以下步骤：（适用于安装任何其他chrome插件）

注：截图来自chrome Version 98.0.4758.102，其他版本可能稍有不同，应该影响不大

1、找到插件的github路径，本文插件点击ReRes

2、把源码下载到本地并解压

3、在chrome浏览器地址栏输入chrome://extensions/进入扩展页

开启Developer mode，点击Load unpacked 按钮进行上传

选中解压的文件夹，然后打开即可看到插件已经出现在插件列表，如下：

浏览器右上方没有看到按钮的话可以如图操作把插件入口固定：

使用

点击浏览器上方的图标即可打开界面，建议在管理规则界面进行添加、导入、导出，规则使用正则进行匹配

作者说明：

批量导入可以编辑一个json文件进行上传，如下：

[{"req":"^https?:\\/\\/.*test.com","res":"http://qunar.com","group": "[groupName]","checked":false},{"req":".*hanan.com","res":"http://cssha.com","group": "[groupName]","checked":true}
]

单个接口代理小tips

场景：
本地调试过程中可能会出现一些数据只有线上才有，这时候可能就需要模拟数据（类似mock，但我想更加快捷），我用接口返回的数据格式新建一个json文件，然后把对应的请求链接代理到本地的一个json文件

可以是本地如：`file:///D:/test-projects/xxxx.json``

也可以是远程的或本地服务的，如：http://localhost:5500/xxxx.json

顺便介绍一个快速起本地服务的方式

工具：

vscode，并安装Live Server插件，安装完后，右下角可以看到一个如下按钮，点击即以当前目录为根目录起一个服务，并跳转到浏览器打开

如果想要用ReRes代理本地服务中的文件，就可以把json文件放在该目录中通过http://localhost:5500/xxx.json 进行访问

鸣谢造轮子的大佬们！！！