当前位置：首页 > article >正文

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

article 2025/3/19 4:17:47

拦截网页中的 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;
  });
};

解释：

保存原始的 Fetch 方法：
```
var originalFetch = window.fetch;
```
将浏览器原生的 fetch 方法保存到 originalFetch 变量中，以便后续调用。

重写 Fetch 方法：

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

重写 window.fetch 方法，使其在每次调用时执行自定义逻辑。

克隆响应并读取响应体：
```
response.clone().text().then(body => {
  console.log("1024小神 Fetched body:", body);
});
```
- response.clone()：克隆响应对象，因为响应体只能读取一次。
- response.text()：将响应体解析为文本。
- console.log：将响应体内容打印到控制台。
返回原始响应：
```
return response;
```
确保原始的 fetch 调用不受影响，返回原始的响应对象。

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

解释：

保存原始的 XMLHttpRequest.open 方法：
```
var originalXHROpen = XMLHttpRequest.prototype.open;
```
将浏览器原生的 XMLHttpRequest.prototype.open 方法保存到 originalXHROpen 变量中，以便后续调用。
重写 XMLHttpRequest.open 方法：
```
XMLHttpRequest.prototype.open = function() {
  // 拦截逻辑
  originalXHROpen.apply(this, arguments);
};
```
重写 XMLHttpRequest.prototype.open 方法，使其在每次调用时执行自定义逻辑。
监听请求完成事件：
```
this.addEventListener("load", function() {
  console.log("1024小神 response:", this.responseText);
});
```
- 当请求完成时（load 事件触发），打印响应体内容（this.responseText）到控制台。
调用原始的 open 方法：
```
originalXHROpen.apply(this, arguments);
```
确保原始的 open 方法逻辑不受影响。

4. 代码的作用

Fetch 拦截：
- 每次调用 fetch 时，捕获响应体内容并打印到控制台。
- 你可以进一步处理响应体内容，例如发送到后台或存储起来。
XMLHttpRequest 拦截：
- 每次调用 XMLHttpRequest 时，捕获响应体内容并打印到控制台。
- 同样可以进一步处理响应体内容。

5. 示例输出

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

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

控制台输出：

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

6. 注意事项

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