你以为抓包软件只能抓包吗？看看抓包软件还有啥牛逼功能！
我是 HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，发送加微信，交个朋友），转发本文前需获得作者 HullQin 授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费没广告。还独立开发了《合成大西瓜重制版》。还开发了《Dice Crush》参加 Game Jam 2022。喜欢可以关注我 HullQin 噢～我有空了会分享做游戏的相关技术。
欢迎阅读：本专栏上篇文章《用 JS 找到: 哪 个 小 坏 蛋 给 我 连 点 2 次 赞 ？》。
背景
抓包软件功能越来越强大了。抓包软件主要作用是：在用户浏览器和服务器有 HTTP 请求交互时，通过建立一个「中间人」，窃听他们的所有请求。
抓包软件实现原理是：启动一个服务（称之为代理服务），当用户浏览器发生 HTTP 请求时：
用户浏览器优先请求代理服务。
代理服务获得用户请求后，代理服务重新构造一模一样的请求，发给真正的服务器。
真正的服务器返回响应 Response 给代理服务。
代理服务获得响应 Response 后，发送给用户浏览器。
抓包软件就是一个「中间人」，可以修改「请求」和「响应」。有了这样的功能，它能做更多事！
whistle 就是一个好用、免费、开源的抓包软件，本文介绍一下它可以实现什么强大的功能。
看完本文后，如果你感兴趣，可以继续阅读whistle官方文档，深入学习和使用。要上手，请至少阅读「安装启动」和「代理与证书」部分，写的很详细了。
通过 https 访问仅支持 http 的网站
场景：本地开发用 https 访问
本地开发时，假设服务启动在127.0.0.1:3000上，它可能只支持 http 访问，不支持 https 访问。但是有一些 API 是只能在 https 使用的（例如 navigator 定位相关）。
如果你想使用 https 访问127.0.0.1:3000，你只需要配置这样的代理即可：
配置应该写在如图所示的地方：
你访问https://127.0.0.1:3000/时，就会以 https 方式访问到你的前端服务啦。
原理
whistle 服务和你的前端服务是通过 http 连接的，你的浏览器和你的 whistle 服务是通过 https 连接的。whistle 作为中间人，只是转发、透传。
通过线上域名访问你的本地服务
场景一：前端代码里可能有域名判断。以前，我们可能得在代码里这么写：
有什么后果？线上分支测试不到。你本地只测试了第一个分支，但是第二个分支没法测。
场景二：跨域问题
有时候代码依赖后端 API，但是后端开发没给127.0.0.1域名配置 CORS 头，只允许同域名的来源访问 API。本地开发时用127.0.0.1发请求会报跨域问题。
场景三：切换线上数据、测试数据、mock 数据
我们代码中发请求，可能都是对服务器线上域名发请求。这样切换测试数据、mock 数据不太方便。
解决
你可以配置代理，将线上域名转到本地开发服务器上（或者转到测试环境、mock 数据）。这样虽然浏览器认为你的域名是线上服务，但展示内容其实是你的开发服务器（请求到数据也都是测试环境或 mock 数据）。
假设你的本地服务器是127.0.0.1:3000，线上服务器是online.com，你可以配置代理：
原理
你的浏览器通过http://online.com/访问你的 whistle 服务，whistle 服务访问http://127.0.0.1:3000/。whistle 作为中间人，只是转发、透传。
解决跨域问题
场景：某个别人的网站报错跨域 bug
如果你访问一些网站时崩溃了，那个网站没人修，但你着急用，你可以找到报错的域名，通过 whistle 解决跨域问题。
解决
有 2 种方法（下面 2 行分别是一种），可以都试一下，看哪个好用就用哪个，记得把域名改成跨域请求的域名。
原理
跨域，是浏览器行为。其实发生跨域时，请求已经发出，响应也已经收到，但是浏览器发现服务器不允许跨域，就不展示给用户了。
只要我们让 whistle 做一个「中间人」，修改响应头，给跨域头通通加上，再把 Response 返回给浏览器，就解决跨域问题了。
修改 API 响应内容
场景：看看掘金双 Lv8 Logo 是什么样子
如果我们想修改掘金 API 返回结果怎么办？
改一些 UI 逻辑，改 DOM 可不容易，你可能还要去其他人那里找现成的来复制。
不如干脆直接，改请求结果！那么页面自动按照请求结果渲染，如下图：
解决
详见 whistle 的resBody语法。
原理
whistle 作为中间人，用你提供的 Response Body 替换了掘金服务器的 Response Body。
启动本地静态资源服务器
场景：本地预览编译结果
有时候，我们编译好了，想测试一下编译产物是否正常。难道需要部署完才能测试吗？
大可不必，启动 whistle，把某个域名解析到你的某个文件目录，那么就可以直接用 HTTP 协议访问啦。
解决
详见 whistle 的file语法。
原理
whistle 作为中间人，用你提供的文件路径，作为 Response，返回给了浏览器。
写在最后
我是 HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，发送加微信，交个朋友），转发本文前需获得作者 HullQin 授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费没广告。还独立开发了《合成大西瓜重制版》。还开发了《Dice Crush》参加 Game Jam 2022。喜欢可以关注我 HullQin 噢～我有空了会分享做游戏的相关技术。
版权声明: 本文为 InfoQ 作者【HullQin】的原创文章。
原文链接:【http://xie.infoq.cn/article/5dc3b4018787bfa75703756ee】。文章转载请联系作者。
公众号【线下聚会游戏】 2020.10.07 加入
game.hullqin.cn 我做了一些联机桌游网页：支持2-10人联机的UNO、2-4人联机的斗地主、2人联机的五子棋。无需下载，点开即玩！叫上朋友，即刻开局！不看广告，不做任务，享受「纯粹」的游戏！
评论