Angular HttpInterceptor拦截错误后，控制器无法获取服务端错误详情

嘿，这个问题我熟！你遇到的情况是因为拦截器的错误处理逻辑没把非401的错误正确传递回去，导致控制器拿到的是模糊的TypeError，而不是服务端返回的具体HttpErrorResponse。我给你一步步解决：

1. 修正HttpInterceptor的错误处理逻辑 #

你的拦截器需要只处理401重定向，其他错误原封不动抛回上游，这样控制器才能拿到完整的服务端错误详情。下面是修正后的拦截器代码：

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor,
  HttpErrorResponse
} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { Router } from '@angular/router';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor(private router: Router) {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    // 为请求添加自定义头（这里替换成你的实际请求头）
    const authRequest = request.clone({
      setHeaders: {
        'Authorization': `Bearer ${localStorage.getItem('token')}`
      }
    });

    return next.handle(authRequest).pipe(
      catchError((err: HttpErrorResponse) => {
        // 仅处理401未授权的情况
        if (err.status === 401) {
          // 清除本地缓存的token（如果有的话）
          localStorage.removeItem('token');
          // 重定向到登录页
          this.router.navigate(['/login']);
        }
        // 关键：其他错误必须重新抛出，让上游控制器能拿到原始的HttpErrorResponse
        return throwError(() => err);
      })
    );
  }
}

这里的核心是return throwError(() => err)——如果省略这一步，拦截器就会把错误“吞掉”，上游订阅只能拿到通用的TypeError，而不是服务端返回的具体错误信息。

2. 控制器中正确捕获错误 #

修正拦截器后，你可以在控制器的订阅回调里直接获取完整的HttpErrorResponse，拿到服务端返回的错误详情：

import { Component } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html'
})
export class DemoComponent {
  constructor(private http: HttpClient) {}

  fetchData() {
    this.http.get('/api/your-endpoint').subscribe({
      next: (response) => {
        console.log('请求成功:', response);
      },
      error: (err: HttpErrorResponse) => {
        // 现在能拿到完整的服务端错误信息了
        console.error('服务端错误详情:', err.error);
        console.error('错误状态码:', err.status);
        console.error('错误消息:', err.message);
      }
    });
  }
}

如果用async pipe的话，也可以在模板里直接绑定错误信息：

<div *ngIf="data$ | async as data; else errorBlock">
  {{ data | json }}
</div>
<ng-template #errorBlock>
  <div *ngIf="error$ | async as err">
    <p>错误状态码: {{ err.status }}</p>
    <p>错误详情: {{ err.error.message }}</p>
  </div>
</ng-template>

控制器对应代码：

import { Component } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html'
})
export class DemoComponent {
  data$: Observable<any>;
  error$: Observable<HttpErrorResponse> | undefined;

  constructor(private http: HttpClient) {
    this.data$ = this.http.get('/api/your-endpoint').pipe(
      catchError((err: HttpErrorResponse) => {
        this.error$ = of(err);
        return of(null);
      })
    );
  }
}

这样就能完美解决你遇到的问题——既保留了401重定向的功能，又能让控制器拿到服务端返回的完整错误详情。

内容的提问来源于stack exchange，提问作者naoru