JavaScript - 拦截XMLHttpRequest

2025 年 10 月 26 日

0 次浏览

2059字数

需要做一个扩展，拦截XMLHttpRequest，修改response里面部分值，查阅资料后一般是通过下面方法拦截

```js
let oldOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function(method, url, async, user, password) {
    // 拦截open
    // console.log(url)
    return oldOpen.apply(this, arguments);
}

以上代码没法直接修改responseText，因为他是只读的，如果不用修改responseText的值，只需要判断response的值然后触发相应事件用上面的方法就可以了。
但如果需要修改返回的responseText值则要用下面的办法来更改responseText的get方法

```js
var accessor = Object.getOwnPropertyDescriptor(XMLHttpRequest.prototype, 'responseText');
Object.defineProperty(XMLHttpRequest.prototype, 'responseText', {
    get: function() {
        let res = accessor.get.call(this);
        // 在这里对res值进行修改
        console.log(res);
        return res;
    },
    set: function(str) {
        console.log('set responseText: %s', str);
        // return accessor.set.call(this, str);
    },
    configurable: true
});
```

```
function setupHook(xhr) {
    function getter() {
        console.log('get responseText');
        delete xhr.responseText;  // 不delete将造成递归
        var res = xhr.responseText;
        setup();
        return res;
    }
    function setter(str) {
        console.log('set response: %s', str);
    }
    function setup() {
        Object.defineProperty(xhr, 'responseText', {
            get: getter,
            set: setter,
            configurable: true
        });
    }
    setup();
}

var oldOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function(method, url, async, user, password) {
    if (!this._hooked) {
        this._hooked = true;
        setupHook(this);
    }
    oldOpen.apply(this, arguments);
}
```

最后修改：2025 年 10 月 26 日