Angular中如何在自动重定向前用拦截器捕获302响应？

能不能在浏览器自动重定向前捕获302响应？ #

可以，但需要调整请求配置。

浏览器默认会自动处理302状态码的重定向，Angular的HttpClient基于XMLHttpRequest/Fetch API实现，默认也会跟随重定向，导致拦截器无法直接捕获302响应。要绕过这个机制，需在发起请求时添加两个关键配置：

• 设置followRedirects: false，阻止浏览器自动跟随重定向
• 配合observe: 'response'，让HttpClient返回完整的响应对象（而非仅响应体）

配置后，拦截器就能接收到302状态的响应，进而读取响应头中的Location字段。

如何拦截302的URL重定向操作？ #

方法1：请求配置+拦截器组合处理 #

1. 发起请求时添加配置

this.http.get('/api/target-endpoint', {
  observe: 'response',
  followRedirects: false,
  withCredentials: true // 认证场景下需携带Cookie时添加
}).subscribe();

2. 编写拦截器捕获302响应

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

@Injectable()
export class RedirectInterceptor implements HttpInterceptor {

  constructor(private router: Router) {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    // 全局统一设置不自动跟随重定向（若无需全局控制，可跳过此克隆步骤）
    const modifiedReq = request.clone({
      followRedirects: false,
      observe: 'response' as 'body' // 类型兼容处理
    });

    return next.handle(modifiedReq).pipe(
      tap(event => {
        if (event instanceof HttpResponse && event.status === 302) {
          const redirectUrl = event.headers.get('Location');
          console.log('捕获302重定向，目标URL:', redirectUrl);
          
          // 自定义处理逻辑示例：
          // 1. 同域路由用Angular Router跳转
          this.router.navigateByUrl(redirectUrl);
          // 2. 跨域地址直接跳转
          // window.location.href = redirectUrl;
          // 3. 弹窗提示用户后再跳转
        }
      })
    );
  }
}

3. 注册拦截器
   在AppModule的providers数组中声明拦截器：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { RedirectInterceptor } from './redirect.interceptor';

@NgModule({
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: RedirectInterceptor, multi: true }
  ]
})
export class AppModule { }

关键注意事项 #

• followRedirects选项从Angular 12版本开始正式支持，低版本需通过自定义XHR实现类似效果
• 跨域场景下，后端需设置Access-Control-Expose-Headers: Location，否则前端无法读取Location响应头
• 若业务依赖浏览器自动重定向（如第三方认证跳转），拦截器无法捕获302，需通过监听路由变化等方式间接处理

内容的提问来源于stack exchange，提问作者Roberto Passareti Filho