Question

我想覆盖window.fetch，以便为所有ajax请求添加一些自定义标头，类似于xhr可以被覆盖的方式。

XMLHttpRequest.prototype.realSend = XMLHttpRequest.prototype.send;
    var newSend = function(vData) {
    this.setRequestHeader('ClientId', 'ANDROID');
    this.setRequestHeader('CustId', '%s');
    this.realSend(vData);
};
XMLHttpRequest.prototype.send = newSend;

我希望能够在android上的webview中执行此操作。我尝试使用shouldInterceptUrl添加自定义标头（例如https://artemzin.com/blog/use-okhttp-to-load-resources-for-webview/），但这是不推荐的。

Answer 1

在页面的某个位置，我们需要注册服务工作者

<script>
    navigator.serviceWorker.register('sw.js')
</script>

sw.js

// sw.js
function isWhatYouWant(request){
    // check request if we should add headers
    return true
}

self.addEventListener('fetch', event => {

    if( isWhatYouWant(event.request) ){
        event.request.headers.set('ClientId', 'ANDROID');
        event.request.headers.set('CustId', '%s');
        event.respondWith(fetch(event.request));
    }

}

PS ：我还没有对其进行测试，设置它并让服务工作者列入白名单并且能够注册它，甚至不确定这是100％正确，但至少关闭

也不确定它是否适用于android webview

覆盖window.fetch原型，添加自定义标头

1 个答案: