Service worker throwing unauthorize 401 in http GET call

Question

I am working on an Angular PWA project and I am making some GET call using basic jwt authorization. When I tried in Postman API is working fine with defined auth , but when I am trying to hit same APIs from the Angular application it is giving me unauthorize access 401 from service worker.

I was going through few posts , blogs related to this issue , sadly I am unable to solve.

Any lead what changes must be done in order to approve by service-worker will be appreciated.

Till now I am doing basic GET http call in my service :

createAuthrorizationHeader(): HttpHeaders {
    let headers = new HttpHeaders();
    const token = JSON.parse(localStorage.getItem('token')!);
    headers = headers.set('Authorization', 'Bearer ' + token!);
    const username = localStorage.getItem('username');
    headers = headers.set('Username', username!);
    headers = headers.set('Content-Type', 'application/json');
    return headers
  }

  createStoreId() {
    const storeids = localStorage.getItem('storeids');
    return storeids
  }

  getData(): Observable<any> {
    let headers = this.createAuthrorizationHeader();
    let id = this.createStoreId();
    var storeid = Number(JSON.parse(storeidd!));
    console.log(headers);
    console.log(storeid);
    return this.http
      .get(`${environment.baseUrl1}/api/List/${id}/0`, { headers: headers })
      .pipe(tap(res => {
        console.log(res);
        retry(2),
          catchError(this.handleError)
      }))
  }

Answer 1

I solved the issue. Actually I was not parsing json of Username from localStorage.getItem('username');

Correction :

const username = JSON.parse(localStorage.getItem('username')!);