Question

我一直在尝试重写XmlHttpRequest函数以接收存储在localStorage上的自定义标头，因此在任何请求下我的自定义标头都会存在。此外，理想可以通过仅使用原始JavaScript而不使用Jquery

来实现

我尝试使用重写方法创建类，使用setRequestHeader设置标头来创建打开并发送原型

它现在应该已经接收到“ UserToken”标头，因此已经重写了xmlhttprequest本机函数

class overrideXmlHTTPRequest {
  static override() {
    const token = localStorage.getItem('userToken')
    const xhttp = new XMLHttpRequest()
    const xhrProto = XMLHttpRequest.prototype
    const origOpen = xhrProto.open

    xhrProto.open = function(method, url) {
      this._url = url
      return origOpen.apply(this, arguments)
    }
    xhrProto.send = function() {
      xhrProto.setRequestHeader('UserToken', token)
    }
  }
}

export default overrideXmlHTTPRequest

Answer 1

您应该使用 XMLHttpRequest 的原型来覆盖 send 方法。在覆盖方法中，只需在发送之前调用 setRequestHeader。

例如：

XMLHttpRequest.prototype.send = function () {
  ...
  this.setRequestHeader('my-header', 'my-value')

查看完整示例：https://runkiss.blogspot.com/2021/03/capture-xmlhttprequest-calls.html

如何正确覆盖XmlHttpRequest以在标头上传递自定义键和值

1 个答案: