/simple-mocxy

simple hosts switcher & mock tool

Primary LanguageJavaScriptMIT LicenseMIT

simple-mocxy

一个正向代理,用于切换 Hosts 和数据 Mock。

配合Chrome插件 SwitchySharp 使用更佳。

使用

配置

修改 ./data/hosts 文件,像配置系统Hosts文件一样配置它:

# 支持单行注释
api.guapizuzhi.com 127.0.0.1 # 支持行末注释

m.local.guapizuzhi.com
  ip 127.0.0.1
  port 8000
  headers
    =simple-mocxy true
    +cookie mock=1;

m.guapizuzhi.com 127.0.0.1

可以看到,除了映射IP地址之外,我们还可以指定其端口(port),甚至还能修改HTTP 请求的Headers。

需要注意的是,一个域名下面的子配置需要有两个空格的缩进哦。

启动

$ npm run start

server started on 9999

可以看到代理服务器默认启动在 9999 端口上。

配合 SwitchySharp 使用

在Chrome中安装 SwitchySharp 后,新建情景模式,手动配置HTTP代理(暂不支持HTTPS)为127.0.0.1:9999

接下来Chrome中访问的HTTP站点,都会先通过 simple-mocxy 代理。根据相关配置,代理会将HTTP请求发送到指定的服务器。如果当前网站没有相关配置,代理就会进行透明转发。

关于

simple-moxcy 想尝试解决什么问题?

做前端开发,与后端的联调当然是不可避免的。然而繁杂的本地环境、测试环境、预发环境和线上环境让debug变得异常麻烦。所谓的切换环境,大多数情况下就是切换Hosts。切就切吧...但是切换系统Hosts有一个主要问题是,系统和浏览器通常都会有缓存。而这个缓存给我们带来的直观感受就是,“切换Hosts有延迟”。simple-moxcy 想尝试解决的第一个问题,就是切换Hosts的延迟问题。

除此之外,代码发布到测试环境或预发环境后,我们常常也会面临难以调试的问题。作为一个前端你打开了开发者工具,看到Network下发的数个请求就开始疑惑,是前端没正确处理接口给的数据吗?还是后端给的数据不正确呢?这种情况下,如果能在浏览器端”直接修改接口数据“该有多好。 simple-moxcy 想尝试解决的第二个问题,就是通过配置拦截请求并返回期望的数据,通过一招移花接木,直接就可以进行一个初步的问题定位。

另外,simple-moxcy 还想在系统Hosts配置方式的基础上,加入更多方便的功能,比如把域名指定到某台服务器上的非80端口上、给HTTP Request带上一些Header。这些功能都应该可以通过简单的配置实现。