如何在XMLHttpRequest的onreadystatechange装饰函数中获取请求URL？

你当前通过Proxy拦截XMLHttpRequest实例化过程，在onreadystatechange中统一添加请求头，但onreadystatechange触发时无法直接获取请求URL，需要先拦截open方法来保存请求地址，再做判断处理。

解决思路 #

XMLHttpRequest的请求URL是通过open()方法设置的，因此我们可以在Proxy内部重写open方法，把请求URL存储到XHR实例的自定义属性中，之后在onreadystatechange里就能直接读取这个URL并执行判断逻辑。

修改后的代码 #

XMLHttpRequest = new Proxy(XMLHttpRequest, {
    construct: function (target, args) {
        const xhr = new target(...args);
        
        // 保存原始open方法
        const originalOpen = xhr.open;
        
        // 重写open方法，存储请求URL
        xhr.open = function(method, url) {
            // 把URL存入XHR实例的自定义属性，避免和原生属性冲突
            this._requestUrl = url;
            // 调用原始open方法，确保所有参数正常传递
            return originalOpen.apply(this, arguments);
        };
        
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 1) {
                // 获取存储的请求URL
                const requestUrl = this._requestUrl;
                // 替换为你的URL判断规则，比如包含特定域名、路径前缀等
                if (requestUrl.includes('target-domain.com') || requestUrl.startsWith('/api/')) {
                    xhr.setRequestHeader('header name', 'header value');
                }
            }
        };
        
        return xhr;
    },
});

关键说明 #

1. 重写open时用apply调用原始方法，确保method、async等所有参数都能正确传递，不破坏原有请求逻辑。
2. 自定义属性_requestUrl用下划线开头，避免和XHR原生属性命名冲突。
3. 在onreadystatechange中直接读取存储的URL，根据业务规则判断是否添加请求头即可。

内容的提问来源于stack exchange，提问作者zanuda