how to intercept all http requests in angular

Question

i m creating a WPA using angular 8

yesterday i read about service workers and also implemented them in plain javascript. they worked well and gave me full access over all network requests

but today when i implemented service workes in angular 8 i got to know they can only intercept http calls made by httclient [not so helpful]

what i want is even if i try to do a get request using jquery directly from console i should get a note

and yesterday i could do it with plain js implementation

this doubt is not realed to coding at all

all i want to know is : is there a way to get low level access to the fetch requests of service worker ? or will i have give up the idea of httpInterceptor and implement my own logic using plain js ?

please help any kind of arguments are welcomed

You should be using @angular/pwa see https://angular.io/guide/service-worker-getting-started — Tom Shaw, Jan 18 '20 at 07:40
it just let me implement http interceptor rest of the things are handled by itself — Harkal, Jan 18 '20 at 08:35

score 2 · Answer 1 · answered Jan 18 '20 at 16:36

2

I think The angular HttpInterceptor will only intercept requests that you make using HttpClient only provided by angular. It will not intercept any requests made in plain .js or jQuery

answered Jan 18 '20 at 16:36

shaikh

21
3

i have already mentioned that in question. do u have any hack ? – Harkal Jan 18 '20 at 17:02
I can confirm that this is true. What is more HTTP_INTERCEPTOR works well with on module level, but each module may still have different HttpClient and then this would require multiple interceptors OR interceptor defined on app module level. Javascript http requests are not intercepted via angular interceptor... – Jacob Jul 16 '22 at 21:02

score 0 · Answer 2 · answered Jan 20 '20 at 00:29

0

You can't intercept HTTP request in the UI. All HTTP requests pass through an active service worker. That is where you intercept the request, not in the UI.

answered Jan 20 '20 at 00:29

Chris Love

3,740
1
19
16

Could you provide an example how this would be done? – hellmit100 Sep 22 '20 at 15:13
1

I have an intro article to service workers. There is a section on service worker caching that should help. https://love2dev.com/blog/what-is-a-service-worker/ – Chris Love Sep 26 '20 at 18:41

score 0 · Answer 3 · answered Jul 09 '23 at 20:52

Sample code for intercepting calls made to Fetch API using Proxy.

window.fetch = new Proxy(window.fetch, {
    apply(target, thisArg, argsList) {
        //do your stuff;
        return target;
    },
});

Sample code for intercepting calls made through XMLHttpRequest using prototype.

(function(send) { 
    XMLHttpRequest.prototype.send = function(data) { 
        //do your stuff;
        send.call(this, data);

    }; 
})(XMLHttpRequest.prototype.send);

Credits: https://stackoverflow.com/a/23539487

how to intercept all http requests in angular

3 Answers3