一文教你屏蔽 HTTP 和 WebSocket 请求

138 阅读2分钟

在日常的项目开发中,会遇到 Block HTTP 请求和 WebSocket 请求来测试一些场景。

HTTP

我们先来看看什么是 HTTP 请求

超文本传输协议 (HTTP) 是万维网的基础,通过超文本链接加载网页。HTTP 是一种应用程序层协议,旨在在联网设备之间传输信息,并在网络协议栈的其他层之上运行。HTTP 上的一个典型工作流程是客户端计算机向服务器发出请求,然后服务器发送响应消息

划重点,HTTP 请求是客户端向服务器发出的请求。而浏览器(比如Chrome) 为了开发人员提供了调试工具,可以在调试面板的 NetWork 上看到客户端发出的请求

image.png

点击该请求,可以看到关于该请求详细的内容

image.png

我们可以看到 HTTP 的请求头/请求体/响应体等等。在这一点上,Chrome 做的真好!!! 既然文章开头说了如何屏蔽 HTTP 请求,那笔者就不废话了

image.png

同样选择 HTTP 请求,点击鼠标右键,出现诸多操作的 Tooltip 框,其中有两个功能是我们需要关注的,分别是 Block request URL 和 Block request domain

  • Block request URL 是阻止或拦截对某个特定 URL(统一资源定位符)的请求
  • Block request domain 是阻止对特定域名下的所有资源或服务

当选择 Block request URL 后,

image.png

再执行 Replay XHR,观察其效果

image.png

可以发现其状态显示 blocked:devtools,意思就是说被 devtools 屏蔽了

从上面的操作流程中,可以发现 Chrome 的 devtools 工具自带屏蔽 HTTP 请求的操作。业务上需要屏蔽 HTTP 请求还是很简单的

WebSocket

说完了屏蔽 HTTP 请求,那么我们来看一下前端交互用到的另一种协议 WebSocket,看看如何屏蔽 WebSocket 连接

笔者找到一个与 pusher.js 有关的例子

image.png

选择后,点击鼠标右键,可以看到下面的效果

image.png

依旧提供 Block request URL 和 Block request domain 两个选项,全部选上看看

结果是结果是结果是并没有屏蔽 WebSocket 连接。也就是说 Chrome 的 devtools 工具无法屏蔽 WebSocket 连接

那该怎么屏蔽 WebSocket 连接呢?在这里介绍一个网络代理工具

打开网络代理工具工具,找到我们配置的文件,用 VSCode 打开配置文件,找到像这样的内容

image.png

比如我们要屏蔽 pusher.js 的服务,只需要加上这么一行,- DOMAIN-SUFFIX,pusher.com,REJECT,然后重新启用网络代理工具, 刷新页面,那么 pusher.com 相关的服务全部被屏蔽

总结

  • 屏蔽 HTTP 请求可以使用 Chrome devtools 提供 NetWork 面板功能完成

  • 屏蔽 WebSocket 请求需要借助网络代理工具帮忙