拦截网页中的 Fetch 和 XMLHttpRequest 请求方式方法

拦截网页中的 Fetch 和 XMLHttpRequest 请求，并捕获它们的响应体内容。通过这种方式，你可以在控制台中查看这些请求的响应数据，或者进一步处理这些数据（例如发送到后台或存储起来）。

以下是代码的逐行解释：

---

1. 整体结构

(function() {
  // 代码逻辑
})();

这是一个 立即执行函数表达式 (IIFE)，用于创建一个独立的作用域，避免变量污染全局环境。

---

2. 拦截 Fetch 请求

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;
  });
};

解释：

1. 保存原始的 Fetch 方法：

   <pre>

   var originalFetch = window.fetch;

   <p>将浏览器原生的&nbsp;<code>fetch</code>&nbsp;方法保存到&nbsp;<code>originalFetch</code>&nbsp;变量中，以便后续调用。</p>
   </li>
   <li>
   <p><strong>重写 Fetch 方法</strong>：</p>
   
   <pre>

   window.fetch = function() { return originalFetch.apply(this, arguments).then(response => { // 拦截逻辑 }); };

   <p>重写&nbsp;<code>window.fetch</code>&nbsp;方法，使其在每次调用时执行自定义逻辑。</p>
   </li>
   <li>
   <p><strong>克隆响应并读取响应体</strong>：</p>
   
   <pre>

   response.clone().text().then(body => { console.log("1024小神 Fetched body:", body); });

   <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;

   <p>确保原始的&nbsp;<code>fetch</code>&nbsp;调用不受影响，返回原始的响应对象。</p>
   </li>

---

3. 拦截 XMLHttpRequest 请求

var originalXHROpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function() {
  this.addEventListener("load", function() {
    console.log("1024小神 response:", this.responseText);
    // 这里可以处理响应体内容，比如发送给后台或者存储起来
  });
  originalXHROpen.apply(this, arguments);
};

解释：

1. 保存原始的 XMLHttpRequest.open 方法：

   <pre>

   var originalXHROpen = XMLHttpRequest.prototype.open;

   <p>将浏览器原生的&nbsp;<code>XMLHttpRequest.prototype.open</code>&nbsp;方法保存到&nbsp;<code>originalXHROpen</code>&nbsp;变量中，以便后续调用。</p>
   </li>
   <li>
   <p><strong>重写 XMLHttpRequest.open 方法</strong>：</p>
   
   <pre>

   XMLHttpRequest.prototype.open = function() { // 拦截逻辑 originalXHROpen.apply(this, arguments); };

   <p>重写&nbsp;<code>XMLHttpRequest.prototype.open</code>&nbsp;方法，使其在每次调用时执行自定义逻辑。</p>
   </li>
   <li>
   <p><strong>监听请求完成事件</strong>：</p>
   
   <pre>

   this.addEventListener("load", function() { console.log("1024小神 response:", this.responseText); });

   <ul>
   	<li>当请求完成时（<code>load</code>&nbsp;事件触发），打印响应体内容（<code>this.responseText</code>）到控制台。</li>
   </ul>
   </li>
   <li>
   <p><strong>调用原始的 open 方法</strong>：</p>
   
   <pre>

   originalXHROpen.apply(this, arguments);

   <p>确保原始的&nbsp;<code>open</code>&nbsp;方法逻辑不受影响。</p>
   </li>

---

4. 代码的作用

• Fetch 拦截：

  <ul>
  	<li>每次调用&nbsp;<code>fetch</code>&nbsp;时，捕获响应体内容并打印到控制台。</li>
  	<li>你可以进一步处理响应体内容，例如发送到后台或存储起来。</li>
  </ul>
  </li>
  <li>
  <p><strong>XMLHttpRequest 拦截</strong>：</p>
  
  <ul>
  	<li>每次调用&nbsp;<code>XMLHttpRequest</code>&nbsp;时，捕获响应体内容并打印到控制台。</li>
  	<li>同样可以进一步处理响应体内容。</li>
  </ul>
  </li>

---

5. 示例输出

假设页面中有一个 Fetch 请求和一个 XMLHttpRequest 请求：

• Fetch 请求的响应体是 { "name": "1024小神" }。
• XMLHttpRequest 请求的响应体是 Hello, World!。

控制台输出：

1024小神 Fetched body: { "name": "1024小神" }
1024小神 response: Hello, World!

---

6. 注意事项

1. CORS 限制 ：

   <ul>
   	<li>如果目标网站启用了 CORS 保护，可能无法直接访问响应体。</li>
   </ul>
   </li>
   <li><strong>性能影响</strong>：
   <ul>
   	<li>拦截所有请求可能会影响页面性能，建议按需过滤。</li>
   </ul>
   </li>
   <li><strong>响应体类型</strong>：
   <ul>
   	<li><code>response.text()</code>&nbsp;适用于文本类型的响应体。如果是 JSON 或二进制数据，可以使用&nbsp;<code>response.json()</code>&nbsp;或&nbsp;<code>response.blob()</code>。</li>
   </ul>
   </li>

---

总结

这段代码通过重写 fetch 和 XMLHttpRequest 方法，实现了对网页请求的拦截和响应体内容的捕获。你可以在此基础上扩展功能，例如将捕获的数据发送到后台或存储起来。