forkJoin 和拦截器一起不起作用答案

【问题标题】：forkJoin and interceptor together not workingforkJoin 和拦截器一起不起作用
【发布时间】：2021-08-13 14:37:33
【问题描述】：

我使用forkJoin 处理多个请求。它运行良好。

但是在我添加拦截器之后，它就停止工作了。

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  const token = localStorage.getItem('token');

  if (token) {
    request = request.clone({
        url: request.url,
      setHeaders:
      { Authorization: `Bearer ${token}`,
        'Access-Control-Allow-Origin': '*'  
        }
    });
    return next.handle(request); 
  } else {
    this.router.navigate(['/login']);
    return next.handle(request);
  }
}

forkJoin 代码：

const s0 = return this.http.get < IEntityOne > ('u1');
const s1 = return this.http.get < IEntityTwo > ('u2');

forkJoin([s0, s1]).subscribe(
  ([v1, v2]) => {
    console.log(v1);  // <-------- This line of code is never reached
  }
)

经过谷歌搜索，我将代码更改为

return next.handle(request).pipe(take(1));

但是还是不行。

【问题讨论】：

也许还有别的：检查网络选项卡。有错误CORS error，不过我加了。
Access-Control-Allow-Origin 不是你作为前端应该添加的东西；这是一个服务器配置
但是为什么没有拦截器就没有CORS错误？添加之后，问题发生了吗？输出后端应该已经添加了 CORS。
因为使用拦截器，您正在添加 'Authorization' 标头，并且您的服务器由于某种原因不喜欢该令牌。真的可能有很多原因；也许您还发送了一些过期的 cookie？不过，您可能需要仔细检查语法；您似乎没有在引号中使用Authorization。此外，当您将鼠标悬停在选项卡上的 CORS 错误上时，它会说什么？没有访问控制允许来源？
是的，所以如果你用谷歌搜索错误，你会看到它是一个服务器配置

标签： angular http rxjs angular-http-interceptors

【解决方案1】：

forkJoin 运算符只会在所有内部 observable 完成后发出 - 因此在这种情况下，如果这些调用中的一个或没有一个成功完成，那么 forkJoin observable 将不会发出任何东西（导致没有记录发生）。

对于初学者，请在您使用的任何开发人员工具中检查您的“网络”选项卡以查看这些请求，并确保您收到来自后端的响应。

其次，正如@eko 指出的那样，尝试 combineLatest。创建该可观察对象时，它会在 any 内部可观察对象完成的任何时间发出。这样，如果两个都成功完成，您将看到 2 个控制台日志，如果一个完成，则看到 1 个，等等。

最后，您不应在拦截器中使用take 运算符（在此上下文中）。由于拦截器旨在充当某种“管道”（不是 Angular 管道，只是在 Http 请求流经它们的意义上）使用take(1) 将导致对后端的任何请求（在第一个之后）根本不返回.

【讨论】：

我在@eko 之后发表了评论。事实证明这是CORS错误。但我在拦截器中添加了 'Access-Control-Allow-Origin': '*'。