我是公众号线下派对游戏的作者HullQin（欢迎关注公众号，发加微信，交友），转载本文需作者HullQin授权。我独立开发了《联机桌游合集》，这是一个网页，在这里你可以轻松地和朋友一起玩网络游戏，五子棋等游戏，不收费，也没有广告。还为GameJam2022开发了《Dice Crush》，喜欢的话可以关注我HullQin哦~有空我会分享制作游戏的相关技术。欢迎阅读：本专栏上一篇文章《用JS找到: 哪 个 小 坏 蛋 给 我 连 点 2 次 赞 ？》。后台抓包软件越来越强大了。抓包软件的主要功能是在用户的浏览器和服务器有HTTP请求交互时，通过建立一个“中间人”来窃听他们所有的请求。抓包软件的实现原理是：启动一个服务（称为代理服务），当用户浏览器产生HTTP请求时：用户浏览器先请求代理服务。代理服务获取到用户请求后，再重构完全相同的请求发送给真实服务器。真实服务器返回一个Response给代理服务。代理服务得到Response后，发送给用户的浏览器。抓包软件是一个“中间人”，可以修改“请求”和“响应”。有了这样的功能，它可以做得更多！Whistle是一款易于使用、免费且开源的数据包捕获软件。本文介绍它可以实现哪些强大的功能。看完本文，如果你有兴趣，可以继续阅读whistle的官方文档，深入学习和使用。要开始，请至少阅读“安装和启动”和“代理和证书”部分，这些部分写得非常详细。通过https访问只支持http的网站：本地开发使用https访问本地开发时，假设服务启动在127.0.0.1:3000，可能只支持http访问，不支持https访问。但是有一些API只能在https中使用（比如导航器定位相关）。如果想用https访问127.0.0.1:3000，只需要配置这样一个代理：https://127.0.0.1:3000/http://127.0.0.1:3000/配置要这样写图中Where：当你访问https://127.0.0.1:3000/时，你会通过https访问你的前端服务。原理就是哨子服务和你的前端服务是通过http连接的，你的浏览器和你的哨子服务是通过https连接的。Whistle作为中间人，只是转发和透传。通过在线域名访问本地服务场景一：前端代码中可能存在域名判断。在过去，我们可能不得不在代码中这样写：if(['127.0.0.1','localhost'].includes(window.location.host)){}elseif(window.location.host==='online.com'){}有什么后果？在线分支不能测试。你只在本地测试了第一个分支，但是无法测试第二个分支。场景二：跨域问题有时代码依赖后端API，但后端开发并没有为127.0.0.1域名配置CORS头，只允许同域名源访问API。在本地开发时，使用127.0.0.1发送请求会报跨域问题。场景三：在线数据、测试数据、模拟数据的切换我们代码中发送的请求，可能都是对服务器在线域名的请求。这种方式不方便切换测试数据和mock数据。可以配置代理将线上域名传输到本地开发服务器（或者传输到测试环境，mock数据）。这样，虽然浏览器认为你的域名是在线服务，但显示的内容实际上是你的开发服务器（请求的数据也是测试环境或mock数据）。假设你本地服务器是127.0.0.1:3000，在线服务器是online.com，你可以配置代理：http://online.com/http://127.0.0.1:3000/原理是你的浏览器通过http://online.com/访问你的哨子服务，哨子服务访问http://127.0.0.1:3000/。Whistle作为中间人，只是转发和透传。解决跨域问题场景：别人的网站报跨域bug。如果你访问了一些崩溃的网站，而且没有人修复那个网站，但是你又很着急，你可以找到报错的域名，通过whistle解决跨域问题。解决方法有两种（下面两行各一个），可以两种都试试，哪个好用就用哪个，记得把域名改成跨域请求的域名。i.snssdk.comresCors://enablemcs.snssdk.comresCors://*参考whistle的resCors语法。原理是跨域，也就是浏览器行为。其实发生跨域的时候，已经发送了请求，也收到了响应，但是浏览器发现服务器不允许跨域，所以不会显示给用户。只要我们让whistle充当“中间人”，修改responseheader，添加所有跨域header，将Response返回给浏览器，跨域问题就迎刃而解了。修改API响应内容场景：看掘金的双Lv8Logo长什么样。如果我们想修改NuggetsAPI返回的结果怎么办？改变一些UI逻辑和DOM并不容易。你可能得去别人那里找现成的复制。还是直接改请求结果比较好！然后根据请求结果自动渲染页面，如下图：详见whistle的resBody语法。原则whistle作为中间人，将Nugget服务器的ResponseBody替换成你提供的ResponseBody。启动本地静态资源服务器场景：在本地预览编译结果有时候，我们编译完之后，想测试一下编译出来的产品是否正常。是否需要在测试前部署？不用了，启动whistle，把某个域名解析到你的某个文件目录下，就可以直接使用HTTP协议访问了。有关详细信息，请参阅whistle的文件语法。原理是whistle作为中间人，将你提供的文件路径作为Response，返回给浏览器。最后，我是公众号线下派对游戏的作者HullQin（欢迎关注公众号，发送加微信，交友），转载本文需作者HullQin授权。我独立开发了《联机桌游合集》，这是一个网页，在这里你可以轻松地和朋友一起玩网络游戏，五子棋等游戏，不收费，也没有广告。还为GameJam2022开发了《Dice Crush》，喜欢的话可以关注我HullQin哦~有空我会分享制作游戏的相关技术。
