使用HttpInterceptor拦截请求时出现请求被取消问题求助

我来帮你拆解问题根源，再给出针对性的解决方案：

问题1：拦截器触发CORS错误导致请求被取消 #

你遇到的第一个核心问题是OPTIONS预请求被错误添加了Authorization头。浏览器发送跨域非简单请求前，会自动发起OPTIONS预请求，这个请求是不应该携带Authorization头的——但你的拦截器给所有请求都加了这个头，导致AWS API Gateway的CORS配置拒绝了这个预请求，最终整个请求被取消。

修复方案：排除OPTIONS请求 #

修改拦截器，先判断请求方法是否为OPTIONS，这类请求直接放行，不添加Authorization头：

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  // 先放行OPTIONS预请求，不添加Auth头
  if (request.method === 'OPTIONS') {
    return next.handle(request);
  }

  return this.getSession()
    .pipe(
      mergeMap((session: CognitoUserSession) => {
        if (session.getIdToken()) {
          request = request.clone({
            setHeaders: {
              Authorization: session.getIdToken().getJwtToken()
            }
          });
        }
        return next.handle(request);
      }),
      // 建议添加错误处理，避免token获取失败导致所有请求中断
      catchError(error => {
        console.error('获取Session失败:', error);
        return next.handle(request); // 无token时直接放行，或根据业务逻辑调整
      })
    );
}

问题2：转Promise后订阅回调不执行 #

你尝试把next.handle(request)转成Promise再处理，这会破坏Angular HTTP的Observable流机制：

• HttpHandler.handle()返回的是冷Observable，转成Promise后，虽然服务器返回了数据，但Promise的一次性特性会打断Observable的订阅链路；
• 另外HttpInterceptor要求返回Observable<HttpEvent<any>>，直接返回Promise会导致Angular的HTTP客户端无法正确处理订阅逻辑，最终回调不触发。

修复方案：保持Observable原生流处理 #

不要将Observable转成Promise，用RxJS的操作符（比如pipe+mergeMap）处理异步逻辑，就像上面修改后的拦截器那样——这样既能正确处理异步token，又能保证订阅链路正常工作。

额外检查项 #

1. 确认AWS API Gateway的CORS配置：允许你的前端域名，并且在"Allowed Headers"中添加Authorization；
2. 确认getSession()返回的Observable能正常完成（不会一直处于pending状态），避免token获取流程阻塞请求。

这样修改后，你的请求应该能正常发送，订阅回调也会正确执行啦~

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