HttpRequest 在被拦截时被取消

Question

问题

我正在使用 HttpInterceptor 将授权 header 添加到我的所有 HTTP 请求。请求被发送到 AWS API 网关。但不幸的是，如果我拦截它们，我的所有请求都会被取消。

如果我将 header 直接添加到请求中，一切都会按预期工作，但由于我的令牌是异步获取的，因此第一个请求将失败，因为令牌尚不可用。这就是为什么我添加了如下所示的拦截器，其中 this.getSession() returns 来自 Promise 的 Observable：

intercept (request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {       
        return this.getSession()
            .mergeMap((session: CognitoUserSession) => {   
                if(session.getIdToken()){
                    request = request.clone({
                        setHeaders: {
                            Authorization: session.getIdToken().getJwtToken()
                        }
                    });  
                }
                return next.handle(request);
         });
    }

请求本身执行如下：

getStoreList(): Observable<string[]> {
 let uri = endpoint + 'getStores';
 return this.http.get<string[]>(uri, {headers: httpHeaders}).pipe(
   map((data) => {
     return data;
 }));
}

this.updateHistoryService.getStoreList()
      .subscribe((data: string[]) => {
        this.stores = ["all", ...data];
        this.getData();
});

但这会导致： "XHR failed loading: OPTIONS "https://....eu-central-1.amazonaws.com/dev/getStores"" （我正在使用 CORS，这就是发送 pre-flight 请求的原因。）

我试过的

如果我改变这一行：

return next.handle(request);

至：

return from(next.handle(request).toPromise());

//the following works as well:
return next.handle(request).toPromise();

我可以在控制台中看到，数据已从服务器成功加载，没有取消任何请求，但我的回调从未以这种方式调用，因此我无法处理数据。

Answer 1

我通过添加 .pipe(takeWhile(() => this.alive)) 让它工作。看起来像这样：

return this.getSession()
   .pipe(takeWhile(() => this.alive))
        .mergeMap((session: CognitoUserSession) => {   
            if(session.getIdToken()){
                request = request.clone({
                    setHeaders: {
                        Authorization: session.getIdToken().getJwtToken()
                    }
                });  
            }
            return next.handle(request);
     });

HttpRequest 在被拦截时被取消

HttpRequest getting cancelled when intercepted

typescript

angular-http-interceptors

api-gateway

angular-httpclient

angular7

问题

我试过的