/QProxy

Primary LanguageJavaScript

#QPROXY使用指南 这个工具是用来升级传统的host文件开发方式的。我们将会在本机上启动一个代理服务器,然后将所有的http请求转发到这个代理服务器上,由它作为中介按照我们制定的规则转发请求。

这样做的好处一是免去了每次修改host文件以后必须清空浏览器DNS缓存的麻烦(一般都是选择重启浏览器),二是这个代理服务器可以直接用来移动端真机调试(后面说),第三是它可以很方便地让你在不同的环境(本地开发,远程前后端开发机,beta以及线上)以及项目之间中快速地切换。

它的坏处是你在首次使用时需要配置一些东西(但是不多)。

欢迎提bug和拍砖给球球:) ##1.安装 ###npm安装

npm install -g qfproxy

注意是qfproxy不是qproxy,因为qproxy被人用了,另外一定加-g(全局安装)!

还有尽量使用npm安装,因为现在版本更新比较频繁,cnpm很容易有没有同步到最新版本的情况出现。

##2.配置 ###2.1 配置fekit工作目录

sudo qproxy -s /path/to/your/work/folder(这里替换为你的fekit工作目录)

以后可以直接sudo qproxy -f同时启动qproxy和fekit server,免除切换目录烦恼。 即使只是为了启动fekit,这也是坠吼的。

###2.2 配置网络代理 ####Firefox 直接在首选项-高级-网络-连接中配置 ####Chrome 请优先考虑使用超姐(Barret.Ma)开发的chrome扩展,一键切换代理,碉堡!

如果没有扩展,以下是系统的代理配置: 设置-显示高级设置-更改代理服务器设置 ####代理服务器host:port为 127.0.0.1:999 ####Warning1!:请勿与红杏等代理服务同时使用!一定确保其他代理服务处于关闭状态! ####Warning2!:最新发现的bug,直接访问本地的fekit work path的时候(http://qunarzz.com/),如果这个目录下有中文文件名的文件,服务就会报错,所以请确保这个目录下的文件都是E文文件名!目前正在想办法解决.感谢旺帅. ##3.启动 以下命令将同时启动qproxy和fekit(必须加sudo运行):

sudo qproxy -f

也可以在-f后面加入其他fekit参数例如-r -c等等:

sudo qproxy -f -r -c

关于fekit参数请参考fekit文档

##4.使用 在开发时,确保代理服务器配置正确并启动qproxy -f(实际上配置一次以后无需再修改,每次命令行启动qproxy即可正常上网)。然后在浏览器中打开localhost:3000/qproxy#。(现在已经自动打开该页面了)

###新功能!https代理! 现在qproxy默认处在http隧道模式,在收到https的时候会通过隧道转发https流量,免除了和代理的SSL握手,再也不会有恶心的证书无效提示了!

如果你需要抓取https的请求,或者通过rewrite转发请求,需要把https开关开启,这样依然是以前的中间人模式,会提示证书无效。

以后计划增加CA证书,可以通过手动添加信任的方式彻底消灭证书无效提示。

###4.1 配置转发规则和规则分组 浏览器中访问localhost:3000/qproxy#即可访问QPROXY配置界面。(现在已经经过优化,启动qproxy的时候会自动打开这个页面.)

可以在这里修改分组的配置和组内的转发规则的配置。

点击左面的列表可以快速地在分组间切换,你可以按照项目来分组,也可以按照同一个项目的不同环境(本地开发,开发机,测试机)来分组。

在右边可以配置组内的转发规则,和配置host文件类似。不同的是,这些规则按照不同的环境已经分好了组,可以点击“环境”的下拉列表来快速切换某条规则的host。

*小提示:支持多个域对应一个Host,在新建规则时候的域输入框中可以输入多个域比如qunarzz.com te.qunarzz.com,以回车或者空格分隔即可.

另外你之前的所有选择会被保存下来,比如你先在qzz环境中选择了192.168.237.73这台机器,然后你切换回了localhost。下次你再切换到qzz环境时就会自动选中之前配置的73这台机器。这样可以在不同环境中快速切换,比直接修改host文件效率更高

online环境即线上环境,和没配host效果相同。

custom为自定义环境,可以手动输入ip。

###4.2 配置环境/服务器列表 这个功能一般不常用,只有在新添加服务器和删除服务器时候用。

这个界面中直接显示了.qsconfig文件的内容——以JSON格式保存的服务器信息,直接修改JSON文件并保存即可。

但是记得校验一下修改后的JSON。否则出异常了我不管哦。

###4.3 移动端真机调试 这是一个附加功能,在支持修改无线代理配置的手机上配置代理服务器指向你的电脑,并确保你的电脑和手机在同一个无线中即可。

你访问到的文件和你配置的转发规则相关,比如你的qunarzz.com指向了localhost,那么你在手机上访问到的就是你本机上的文件。

###新功能!抓包! qproxy已经鸟枪换炮,不光支持https,还支持抓请求的功能。

目前所有经手qproxy的请求都会在chrome控制台中打出log,可以利用控制台的Filter很方便的过滤自己需要的请求日志。

移动端抓包可以不依赖charles,都在qproxy中解决了!

###4.4 URL Rewrite 这个功能完全从NProxy抄袭而来(功能是抄的,代码是自己写的!-_-),但是没有NProxy那么强大,不支持文件的combo和https请求.

rewrite到本地文件系统的功能还在开发中.

开发这个功能的原因是我在平时的工作中经常会遇到接口跨域的问题,这个功能就是为了解决这个问题而实现的.

当然它肯定还有别的用处,只不过我还没发觉:)

举个栗子说明是最合适的了,设想这样一种场景:

我们在localhost上做开发,访问的url自然是localhost:xxxx/path/to/your/page,但是这个页面用到了一个接口,是post到tips.qunar.com的,这时候这个请求就会因为跨域而无法完成.

遇到这种情况,我们只能央求后端大爷赶快把页面放到开发机上去,否则我们只能mock这个接口.

用这个功能就可以解决这个问题,我们添加一条rewrite规则,把pattern设为localhost的url,把responder设为tips.qunar.com域下的任何一个url(例如tips.qunarzz.com/test/).然后在浏览器中访问tips.qunarzz.com/test/.

这时候我们的代理服务器就会将这个请求截获,并且按照我们配置的规则把它转到localhost上去,跨域问题就解决了.

注意,这里输入的pattern实际上会被转化为正则表达式(使用new RegExp),所以有一个小问题,那就是正则表达式的.是一个元字符,可以匹配任何字符(也包括点字符).

在大多数情况下,直接输入点号是没问题的,比如我们设置pattern为www.qq.com,这条规则可以正确的匹配到www点qq点com,但是它也能匹配到wwwxqqxcom(x替换成任何字符都ok,不过基本上不会有这样的url!).