网页Hook 拦截，修改，请求数据

不多BB，直接上代码

在控制台直接敲此代码进行hook

当网页有触发XMLHttpRequest请求时，可以进行重写数据，拦截，修改获取数据等操作。

这个只是hook XMLHttpRequest的，fetchApi 的代码在下面

(function hookXMLHttpRequest() {
  // 保存原始的XMLHttpRequest.open和send方法
  const realOpen = XMLHttpRequest.prototype.open;
  const realSend = XMLHttpRequest.prototype.send;

  // 重写XMLHttpRequest.open方法
  XMLHttpRequest.prototype.open = function(method, url) {
    // 在控制台记录请求的URL和方法
    console.log('请求地址是：', url);
    console.log('请求方法类型:', method);

    // 调用原始的open方法
    realOpen.apply(this, arguments);
  };

  // 重写XMLHttpRequest.send方法
  XMLHttpRequest.prototype.send = function(data) {
    // 发送请求体参数
    console.log('发送请求之前执行的代码Sending data:', data);

    // 调用原始的send方法，并传入所有参数
    realSend.apply(this, arguments);

    // 监听请求状态变化
    this.addEventListener('readystatechange', () => {
      if (this.readyState === 4) { // 请求已完成
        // 请求完成后执行的代码
        console.log('获取返回的全部数据:', this.responseText);
      }
    });
  };
})();

fetch   看这里

(function hookFetch() {
  // 保存原始的fetch函数
  const realFetch = window.fetch;

  // 重写window.fetch函数
  window.fetch = function(input, init) {
    // 发送的请求体参数
    console.log('发送请求之前执行的代码',init.body);

    // 在控制台记录请求的URL和选项
    console.log('请求地址是：', input);
    console.log('请求选项:', init);

    // 调用原始的fetch函数，并传入所有参数
    return realFetch.apply(this, arguments).then(response => {
      console.log('响应状态码:', response.status);

      // 如果需要，可以对响应进行额外的处理
      // 例如，根据状态码决定是否抛出错误
      if (response.ok) {
        return response.json(); // 打印返回数据，假设数据是json
      } else {
        return response.text().then(text => {
          throw new Error(`请求失败: ${text}`);        });      }    });  };})();

问题：打印出来请求体为什么是null？

答：因为get请求参数是拼接在路径上，所以请求体是null，要获取请求参数，直接在路径上获取就行，只有post时传入请求体才有显示内容。

问题：这个有什么用处？

答：可以监控网络请求数据，也可以修改请求和返回。

例如：某页面请求列表，参数size显示数量是10，固定的，网页上又没有修改显示数量的地方，那么可以试试修改请求，把请求的参数size 重写为9999（如果后端没做显示限制应该可以一波全部出来），然后请求就会改变

还有某些网站会请求判断是不是vip，例如1就是vip，但是返回的数据是0，可以重写返回的vip数据，0改成1就变成vip。

还有其它功能靠自己想