服务工作者在 http GET 调用中抛出未经授权的 401

Question

我正在开发一个 Angular PWA 项目，我正在使用基本的 jwt 授权进行一些 GET 调用。当我在 Postman API 中尝试使用定义的 auth 时工作正常，但是当我试图从 Angular 应用程序中点击相同的 APIs 它给了我 unauthorize 访问来自服务人员的 401.

我浏览了一些与此问题相关的帖子和博客，遗憾的是我无法解决。

任何领导必须完成哪些更改才能得到服务人员的批准，我们将不胜感激。

到目前为止，我在我的服务中进行基本的 GET http 调用：

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

我解决了这个问题。实际上我没有从 localStorage.getItem('username');

解析用户名的 json

更正：

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

服务工作者在 http GET 调用中抛出未经授权的 401

Service worker throwing unauthorize 401 in http GET call

angular

httprequest

service-worker