Angular 5 - HTTP拦截器拦截401作为状态码0答案

【问题标题】：Angular 5 - HTTP Interceptor Intercepts 401 as status code 0Angular 5 - HTTP拦截器拦截401作为状态码0
【发布时间】：2020-11-23 18:05:38
【问题描述】：

我目前无法像大多数应用程序那样拦截 401 状态并重定向到登录页面，我的拦截几乎是样板

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        request = request.clone({
            withCredentials: true
        });

        return next.handle(request)
        .pipe(
            retry(0),
            takeUntil(this.httpCancelService.onCancelPendingRequests()), ==> cancels out pending request on route change
            catchError((error: HttpErrorResponse) => {
                if (error.status === 401) {
                    this.authenticationService.logout() ===> logout incase of 401     
                }  else if (request.url.indexOf("assets") == -1) {
                    this.alertService.error('An unexpected error occurred, please try again later');
                }

                return throwError(errorMessage)
            })
        )
    }

浏览器正在网络选项卡上将请求捕获为 401，但在这个 Angular 拦截器上，我们得到 'error.status' 为 '0' & 'error.message' 为 'Unknown Error'

【问题讨论】：

标签： html css angular http

【解决方案1】：

状态码 0 表示可能是 CORS 错误。这意味着来自后端服务器的响应缺少 Access-Control-Allow-Origin 标头。正确配置后端后，您将能够访问实际的错误代码。

【讨论】：

知道为什么它仍然在浏览器的网络选项卡中显示为“401”而不是在 Angular 中，因为我试图推理出来:)
在网络标签中查看 401 请求的响应。它应该是空的。这是一些奇怪的浏览器魔法。它显示 401 但响应为空。
谢谢！ @bahadrdsr 这似乎是服务器端反向代理没有为 http 错误代码添加 CORS 标头的问题

【解决方案2】：

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(request).pipe(
            catchError((error: HttpErrorResponse) => {
                if ((error.status === 401)) {
                    console.log("HTTP 401")
                }
                return throwError(error);
            })
        );
}

【讨论】：