访问网页返回的那么多请求能全部捕获吗？

Question

// 随便找的链接
axios.get('https://www.cnblogs.com/jcz1206/p/13640039.html')
.then(respans => {
  res.send(respans);
})

用axios返回的是第一个那个数据（13640039.html），其他的请求可能是它自带的js代码发出的请求，用什么方法能够捕获到这些请求吗？
比如 search.svg、newpost

Answer 1

全部“捕获”应该是不可能，但是可以尽力而为。

对于使用 JS 发送的请求，可以这样监听：

1. 重写 window.XMLHttpRequest 类，以监听 XHR 发送的请求（当然还有 IE专属的 XMLObject 方法，略）；
2. 重写 window.fetch 方法，以监听 fetch 发送的请求；
3. 重写 WebSocket 类，以监听使用 WS 发送的请求和收到的数据。

对于一些使用其他手段发送的请求：

1. 对于表单提交的数据，可以遍历并获取所有表单即form节点，并监听其submit事件；
2. 有些鸡贼的请求是使用 iframe 加载的，所以需要遍历并获取所有 iframe，获取其 contentWindow内容，并持续监听其 onload 事件。

静态资源的请求较难监听，可以分两种情况：

1. 首屏渲染出来的，遍历获取其节点，并获取对应的 href（对于 link[rel="stylesheet"]加载的样式表）或 src（例如图片、音频等）；
2. 动态加载的，这个没有很好的办法，可以重写document.write、document.createElement、Element.prototype.appendChild等方法，重写 XMLDocument 等类，并劫持document.innerHTML等可能产生子元素的属性，监听新元素的生成，再采用与首屏渲染的静态资源类似的策略获取资源 URL。

不要忘了文档本身，这个直接获取 window.location.href即可。

绝大部分的资源和请求可以通过上面这些方法的组合来获取，但网络字体、source-map 的加载暂时没有有效的监听方法，一个头铁的做法是解析对应的 CSS、JS 文件，古早的 flashSocket需要研究其具体实现，然后采用对应的方法。

Answer 2

有很多东西是没有意义的数据请求，比如说他请求的精灵图数据，难不成你要仿站？我们只需要抓包捕获我们需要的那部分就好了