ajax拦截请求数据(全局增加签名参数)签名参数可基于时间戳、密钥等生成，防止请求被篡改或伪造，增强接口安全性。所有请

统一签名参数

签名参数可基于时间戳、密钥等生成，防止请求被篡改或伪造，增强接口安全性。
所有请求自动携带统一格式的签名参数，保证接口调用规范性和数据一致性。
在拦截器中动态调整签名策略（如不同接口采用不同签名规则），适应复杂业务场景。

Mock 接口数据

前端与后端可独立工作，无需等待真实接口完成，通过 Mock 数据模拟接口响应，缩短开发周期。
通过拦截请求直接返回预设数据，无需调整现有业务代码结构。
快速验证逻辑，覆盖各类测试场景，加速功能验证流程。

XMLHttpRequest 增加mock方法

mock方法,用来设置模拟数据函数，请求类型，请求URL。并把对应函数绑到到对象上。

var XHR = XMLHttpRequest.prototype

XHR.mock = function (method, url, callback) {
  const mMet = method.toUpperCase();
  const mUrl = url.toLowerCase();
  this[mMet + mUrl] = callback;
}

XMLHttpRequest 重写open方法

重写open方法，用来给请求URL设置，签名参数

var XHR = XMLHttpRequest.prototype
var open = XHR.open;

XHR.open = function (method, url) {
  this._method = method.toUpperCase();
  this._url = url.toLowerCase();
  this._mockUrl = this._method + this._url;
  const mQmn = 'qmkey=签名参数';
  if (arguments[1].includes('?')) {
    arguments[1] = arguments[1] + '&' + mQmn;
  } else {
    arguments[1] = arguments[1] + '?' + mQmn;
  }
  return open.apply(this, arguments)
}

XMLHttpRequest 重写send方法

重写send方法，用来回调onload，onreadystatechange返回模拟数据

var XHR = XMLHttpRequest.prototype;
var send = XHR.send;
XHR.send = function (postData) {
  this['hookQuery'] = postData;
  if (this[this._mockUrl]) {
    const retThis = {
      ...this,
      status: 200,
      readyState: 4,
      responseURL: this._mockUrl,
      responseText: this[this._mockUrl]()
    }
    this.onload.apply(retThis, []);
    this.onreadystatechange.apply(retThis, []);
    return this;
  }
  return send.apply(this, arguments);
}

全部mock.js文件

(function () {
  var XHR = XMLHttpRequest.prototype
  var open = XHR.open;
  var send = XHR.send;

  XHR.mock = function (method, url, callback) {
    const mMet = method.toUpperCase();
    const mUrl = url.toLowerCase();
    this[mMet + mUrl] = callback;
  }

  XHR.send = function (postData) {
    this['hookQuery'] = postData;
    if (this[this._mockUrl]) {
      const retThis = {
        ...this,
        status: 200,
        readyState: 4,
        responseURL: this._mockUrl,
        responseText: this[this._mockUrl]()
      }
      this.onload.apply(retThis, []);
      this.onreadystatechange.apply(retThis, []);
      return this;
    }
    return send.apply(this, arguments);
  }

  XHR.open = function (method, url) {
    this._method = method.toUpperCase();
    this._url = url.toLowerCase();
    this._mockUrl = this._method + this._url;
    const mQmn = localStorage.getItem('keyStr');
    if (mQmn) {
      if (arguments[1].includes('?')) {
        arguments[1] = arguments[1] + '&' + atob(mQmn);
      } else {
        arguments[1] = arguments[1] + '?' + atob(mQmn);
      }
    }
    return open.apply(this, arguments)
  }

})()

基础html文件

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="referrer" content="no-referrer" />
  <title></title>
  <script src="./mock.js"></script>
</head>

<body>
  <button onclick="testAjax()">请求</button>
</body>
<script>
  function testAjax() {
    console.log('testAjax')
  }
</script>

</html>

全局给请求地址增加签名

增加签名，提高接口安全性，防止盗链爬虫等。

  function testAjax() {
    localStorage.setItem('keyStr', btoa('abce=' + btoa('eerewrsdflsdflsjdflert').replace(/=/g, "")));
    console.log('testAjax');
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://127.0.0.1:5500/new-url', false);
    xhr.onload = function () {
      console.log('onload')
      console.log(this)
    }
    xhr.onreadystatechange = function (e) {
      console.log(this.readyState, this.status)
      if (this.readyState == 4 && this.status == 200) {
        // 请求成功
        console.log(this.responseURL);
        console.log(this);
        console.log(this.responseText);
      }
    };

    xhr.send();
  }

设置模拟接口，模拟返回数据

模拟返回数据，在后端接口提供之前，模拟响应数据等

  function testAjax() {
    console.log('testAjax')
    var xhr = new XMLHttpRequest();
    xhr.mock('GET', 'http://127.0.0.1:5500/new-url', function () {
      return { abc: '456' };
    })
    xhr.open('GET', 'http://127.0.0.1:5500/new-url', false);
    xhr.onload = function () {
      console.log('onload')
      console.log(this)
    }
    xhr.onreadystatechange = function (e) {
      console.log(this.readyState, this.status)
      if (this.readyState == 4 && this.status == 200) {
        // 请求成功
        console.log(this.responseURL);
        console.log(this);
        console.log(this.responseText);
      }
    };

    xhr.send();
  }