Intercepting FetchBackend's fetch requests to add an authorisation header

Issue

Is there any way to intercept FetchBackend's fetch request to add an authorisation header ?

I have tried intercepting these fetch requests using an HttpInterceptor but it doesn't seem to work since the FetchBackend doesn't use the HttpClient interface

Solution

If you use the FetchBackend you likely have provideHttp(withFetch()) in your providers.

You should be using the FetchBackend directly but the HttpClient (which will rely on the FetchBackend when you have it enabled via withFetch().

constructor(httpClient: HttpClient) {
  const url = 'http://localhost:8080/sse';
  let sseRequest: HttpRequest<any> = new HttpRequest('GET', url, {
    responseType: 'arraybuffer',
  });
  httpClient.request(sseRequest)
}

If you want to set interceptor

export const authenticationInterceptor: HttpInterceptorFn = (req: HttpRequest<unknown>, next:
  HttpHandlerFn) => {
     const userToken = 'MY_TOKEN'; const modifiedReq = req.clone({
       headers: req.headers.set('Authorization', `Bearer ${userToken}`),
     });
 
     return next(modifiedReq);
};

Which can be used as provideHttpClient(withFetch(), withInterceptors([authenticationInterceptor]))

Answered By - Matthieu Riegler