拦截网页中的 Fetch 和 XMLHttpRequest 请求，并捕获它们的响应体内容。通过这种方式，你可以在控制台中查看这些请求的响应数据，或者进一步处理这些数据（例如发送到后台或存储起来）。
以下是代码的逐行解释：
1. 整体结构
javascript
(function() {
// 代码逻辑
})();这是一个 立即执行函数表达式 (IIFE)，用于创建一个独立的作用域，避免变量污染全局环境。
2. 拦截 Fetch 请求
javascript
var originalFetch = window.fetch;
window.fetch = function() {
return originalFetch.apply(this, arguments).then(response => {
response.clone().text().then(body => {
console.log("1024小神 Fetched body:", body);
// 这里可以处理响应体内容，比如发送给后台或者存储起来
});
return response;
});
};解释：
-
保存原始的 Fetch 方法：
xml<pre>var originalFetch = window.fetch;xml<p>将浏览器原生的 <code>fetch</code> 方法保存到 <code>originalFetch</code> 变量中，以便后续调用。</p> </li> <li> <p><strong>重写 Fetch 方法</strong>：</p> <pre>window.fetch = function() { return originalFetch.apply(this, arguments).then(response => { // 拦截逻辑 }); };xml<p>重写 <code>window.fetch</code> 方法，使其在每次调用时执行自定义逻辑。</p> </li> <li> <p><strong>克隆响应并读取响应体</strong>：</p> <pre>response.clone().text().then(body => { console.log("1024小神 Fetched body:", body); });xml<ul> <li><code>response.clone()</code>：克隆响应对象，因为响应体只能读取一次。</li> <li><code>response.text()</code>：将响应体解析为文本。</li> <li><code>console.log</code>：将响应体内容打印到控制台。</li> </ul> </li> <li> <p><strong>返回原始响应</strong>：</p> <pre>return response;xml<p>确保原始的 <code>fetch</code> 调用不受影响，返回原始的响应对象。</p> </li>
3. 拦截 XMLHttpRequest 请求
javascript
var originalXHROpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function() {
this.addEventListener("load", function() {
console.log("1024小神 response:", this.responseText);
// 这里可以处理响应体内容，比如发送给后台或者存储起来
});
originalXHROpen.apply(this, arguments);
};解释：
-
保存原始的 XMLHttpRequest.open 方法：
xml<pre>var originalXHROpen = XMLHttpRequest.prototype.open;xml<p>将浏览器原生的 <code>XMLHttpRequest.prototype.open</code> 方法保存到 <code>originalXHROpen</code> 变量中，以便后续调用。</p> </li> <li> <p><strong>重写 XMLHttpRequest.open 方法</strong>：</p> <pre>XMLHttpRequest.prototype.open = function() { // 拦截逻辑 originalXHROpen.apply(this, arguments); };xml<p>重写 <code>XMLHttpRequest.prototype.open</code> 方法，使其在每次调用时执行自定义逻辑。</p> </li> <li> <p><strong>监听请求完成事件</strong>：</p> <pre>this.addEventListener("load", function() { console.log("1024小神 response:", this.responseText); });xml<ul> <li>当请求完成时（<code>load</code> 事件触发），打印响应体内容（<code>this.responseText</code>）到控制台。</li> </ul> </li> <li> <p><strong>调用原始的 open 方法</strong>：</p> <pre>originalXHROpen.apply(this, arguments);xml<p>确保原始的 <code>open</code> 方法逻辑不受影响。</p> </li>
4. 代码的作用
-
Fetch 拦截：
xml<ul> <li>每次调用 <code>fetch</code> 时，捕获响应体内容并打印到控制台。</li> <li>你可以进一步处理响应体内容，例如发送到后台或存储起来。</li> </ul> </li> <li> <p><strong>XMLHttpRequest 拦截</strong>：</p> <ul> <li>每次调用 <code>XMLHttpRequest</code> 时，捕获响应体内容并打印到控制台。</li> <li>同样可以进一步处理响应体内容。</li> </ul> </li>
5. 示例输出
假设页面中有一个 Fetch 请求和一个 XMLHttpRequest 请求：
- Fetch 请求的响应体是
{ "name": "1024小神" }。 - XMLHttpRequest 请求的响应体是
Hello, World!。
控制台输出：
yaml
1024小神 Fetched body: { "name": "1024小神" }
1024小神 response: Hello, World!6. 注意事项
-
CORS 限制 ：
xml<ul> <li>如果目标网站启用了 CORS 保护，可能无法直接访问响应体。</li> </ul> </li> <li><strong>性能影响</strong>： <ul> <li>拦截所有请求可能会影响页面性能，建议按需过滤。</li> </ul> </li> <li><strong>响应体类型</strong>： <ul> <li><code>response.text()</code> 适用于文本类型的响应体。如果是 JSON 或二进制数据，可以使用 <code>response.json()</code> 或 <code>response.blob()</code>。</li> </ul> </li>
总结
这段代码通过重写 fetch 和 XMLHttpRequest 方法，实现了对网页请求的拦截和响应体内容的捕获。你可以在此基础上扩展功能，例如将捕获的数据发送到后台或存储起来。