携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情。
这是我的专栏《JS真好玩》，将教你用JS实现一些有趣的东西。JS可以直接在浏览器运行，可以很方便的跟我学习用JS做好玩儿的事情。感谢大家关注～文章求赞噢！祝大家早日变成一名「前端极客」！
欢迎阅读：本专栏上篇文章《用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/ http://127.0.0.1:3000/
复制代码配置应该写在如图所示的地方：
你访问https://127.0.0.1:3000/时，就会以https方式访问到你的前端服务啦。
原理
whistle服务和你的前端服务是通过http连接的，你的浏览器和你的whistle服务是通过https连接的。whistle作为中间人，只是转发、透传。
通过线上域名访问你的本地服务
场景一：前端代码里可能有域名判断。以前，我们可能得在代码里这么写：
if (['127.0.0.1', 'localhost'].includes(window.location.host)) {
} else if (window.location.host === 'online.com') {
}
复制代码有什么后果？线上分支测试不到。你本地只测试了第一个分支，但是第二个分支没法测。
场景二：跨域问题
有时候代码依赖后端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/ http://127.0.0.1:3000/
复制代码原理
你的浏览器通过http://online.com/访问你的whistle服务，whistle服务访问http://127.0.0.1:3000/。whistle作为中间人，只是转发、透传。
解决跨域问题
场景：某个别人的网站报错跨域bug
如果你访问一些网站时崩溃了，那个网站没人修，但你着急用，你可以找到报错的域名，通过whistle解决跨域问题。
解决
有2种方法（下面2行分别是一种），可以都试一下，看哪个好用就用哪个，记得把域名改成跨域请求的域名。
i.snssdk.com resCors://enable
mcs.snssdk.com resCors://*
复制代码原理
跨域，是浏览器行为。其实发生跨域时，请求已经发出，响应也已经收到，但是浏览器发现服务器不允许跨域，就不展示给用户了。
只要我们让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。喜欢可以关注我噢～我有空了会分享做游戏的相关技术，会在这2个专栏里分享：《教你做小游戏》、《极致用户体验》。