如何hook获取到xhr 和 fetch返回的响应头字段？-Go服务器开发

在Web开发中，可以通过以下方法Hook并获取XMLHttpRequest（XHR）和fetch返回的响应头字段：

1. Hook XMLHttpRequest (XHR)

通过重写原生XMLHttpRequest对象的open和send方法，监听响应头：

// 保存原生XHR对象
const originalXHR = window.XMLHttpRequest;

// 重写XHR构造函数
window.XMLHttpRequest = function() {
    const xhr = new originalXHR();
    
    // 重写open方法（可选，用于记录请求信息）
    const originalOpen = xhr.open;
    xhr.open = function(method, url) {
        this._method = method;
        this._url = url;
        return originalOpen.apply(this, arguments);
    };

    // 重写send方法并监听响应
    const originalSend = xhr.send;
    xhr.send = function(body) {
        this.addEventListener('readystatechange', function() {
            if (this.readyState === 4) { // 请求完成
                console.log('XHR Response Headers:', this.getAllResponseHeaders());
                console.log('URL:', this._url);
            }
        });
        return originalSend.apply(this, arguments);
    };
    
    return xhr;
};

2. Hook Fetch API

通过劫持全局的fetch函数，拦截响应并获取头字段：

const originalFetch = window.fetch;

window.fetch = async function(...args) {
    // 调用原生fetch
    const response = await originalFetch.apply(this, args);
    
    // 克隆响应以读取头信息（避免原响应被消费）
    const clonedResponse = response.clone();
    
    // 获取头字段
    const headers = {};
    clonedResponse.headers.forEach((value, key) => {
        headers[key] = value;
    });
    
    console.log('Fetch Response Headers:', headers);
    
    // 返回原始响应以保证正常使用
    return response;
};

注意事项

兼容性
- getAllResponseHeaders()返回的是字符串格式的头信息（如 "Content-Type: text/html\r\n"），需自行解析。
- fetch的响应头通过response.headers直接获取（ES6的Headers对象）。
应用场景
- 调试工具：用于监控网络请求。
- 安全限制：部分敏感头字段（如Set-Cookie）可能受浏览器同源策略限制而无法读取。
生产环境慎用
- 修改原生API可能影响其他代码逻辑，建议仅在开发或分析时使用。