I am using Angular 17 for my application, where I intercept HTTP requests to add an authorization token to the headers. I retrieve the token from session storage and pass it to the Authorization header. The functionality works fine, and the API responses are as expected. However, I noticed that in my browser console, I am getting errors with the message “Error occurred in HTTP request: Http failure response for [API URL]: 0 Unknown Error”. Previously, I used just const token = sessionStorage.getItem('token'); without the if (typeof window !== 'undefined') condition. With that approach, I received an error saying “session storage not defined.”

I have ensured that the token is being added correctly to the request headers. However, I’m unsure why I am receiving these errors. Can anyone help me understand what might be causing this issue and how to resolve it?

Here’s my interceptor code:

import { DOCUMENT } from '@angular/common';
import { HttpInterceptorFn } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { catchError, throwError } from 'rxjs';

export const tokenInterceptor: HttpInterceptorFn = (req, next): any => {
  if (typeof window !== 'undefined') {
    const token = sessionStorage.getItem('token');

    const authReq = req.clone({
      setHeaders: {
        Authorization: `Bearer ${token}`,
      },
    });

    return next(authReq).pipe(
      catchError((error) => {
        console.error('Error occurred in HTTP request:', error);
        return throwError('An error occurred. Please try again.'); 
      })
    );
  }
  return next(req).pipe(
    catchError((error) => {
      console.error('Error occurred in HTTP request:', error);
      return throwError('An error occurred. Please try again.'); 
    })
  );
};

the error code looks like this, but the response is made, and I got the response, but error like this is being thrown, and why

Error occurred in HTTP request: HttpErrorResponse {
  headers: _HttpHeaders {
    normalizedNames: Map(0) {},
    lazyUpdate: null,
    headers: Map(0) {}
  },
  status: 0,
  statusText: 'Unknown Error',
  url: 'https://localhost:44302/api/Complaint/recentListComplaint',
  ok: false,
  name: 'HttpErrorResponse',
  message: 'Http failure response for https://localhost:44302/api/Complaint/recentListComplaint: 0 Unknown Error',
  error: ProgressEvent2 {
    type: 'error',
    target: XMLHttpRequest2 {
      onloadstart: null,
      onprogress: null,
      onabort: null,
      onerror: null,
      onload: null,
      ontimeout: null,
      onloadend: null,
      _listeners: [Object],
      onreadystatechange: null,
      _anonymous: undefined,
      readyState: 4,
      response: null,
      responseText: '',
      responseType: 'text',
      responseURL: '',
      status: 0,
      statusText: '',
      timeout: 0,
      upload: [XMLHttpRequestUpload],
      _method: 'GET',
      _url: [Url],
      _sync: false,
      _headers: [Object],
      _loweredHeaders: [Object],
      _mimeOverride: null,
      _request: null,
      _response: null,
      _responseParts: null,
      _responseHeaders: null,
      _aborting: null,
      _error: null,
      _loadedBytes: 0,
      _totalBytes: 0,
      _lengthComputable: false
    },
    currentTarget: XMLHttpRequest2 {
      onloadstart: null,
      onprogress: null,
      onabort: null,
      onerror: null,
      onload: null,
      ontimeout: null,
      onloadend: null,
      _listeners: [Object],
      onreadystatechange: null,
      _anonymous: undefined,
      readyState: 4,
      response: null,
      responseText: '',
      responseType: 'text',
      responseURL: '',
      status: 0,
      statusText: '',
      timeout: 0,
      upload: [XMLHttpRequestUpload],
      _method: 'GET',
      _url: [Url],
      _sync: false,
      _headers: [Object],
      _loweredHeaders: [Object],
      _mimeOverride: null,
      _request: null,
      _response: null,
      _responseParts: null,
      _responseHeaders: null,
      _aborting: null,
      _error: null,
      _loadedBytes: 0,
      _totalBytes: 0,
      _lengthComputable: false
    },
    lengthComputable: false,
    loaded: 0,
    total: 0
  }
}