使用 preflight 拦截 HTTP 请求，然后执行原始请求答案

【问题标题】：Intercepting HTTP request with a preflight, and then executing the original request使用 preflight 拦截 HTTP 请求，然后执行原始请求
【发布时间】：2021-06-16 12:43:28
【问题描述】：

我正在尝试编写以下 Angular HTTP 拦截器：

intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
  if (request.url.endsWith('/csrf')) {
    return next.handle(request);
  }

  if (!this.cookieService.check('XSRF-TOKEN')) {
    const csrfRequest = new HttpRequest('GET', environment.apiUrl + '/csrf');

    return next.handle(csrfRequest).pipe(
      // something here to retry the original request?
    );
  }

  const modifiedReq = request.clone({
    headers: request.headers.set('X-XSRF-TOKEN', this.cookieService.get('XSRF-TOKEN')),
  });

  return next.handle(modifiedReq);
}

基本思想是，如果浏览器没有设置XSRF-TOKEN cookie，我们需要通过调用/csrf 来预检请求以首先设置该cookie。然后我们需要做原始请求。

如果没有设置 cookie，上面的拦截器确实成功地调用了/csrf。我正在努力解决的是如何在 /csrf 调用之后执行原始 HTTP 请求。

我觉得它可以通过 observable 管道实现，但我没有很多 observables 知识，而且查看 RxJS 文档让我更加困惑。

【问题讨论】：

标签： angular typescript http observable

【解决方案1】：

您可以通过HttpClient 在拦截器中执行此/csrf-request（它应该被注入拦截器）并将其转换为可观察的修改请求处理程序。它看起来像：

intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
  if (request.url.endsWith('/csrf')) {
    return next.handle(request);
  }
  
  return of(this.cookieService.check('XSRF-TOKEN'))
            .pipe(
                switchMap((hasToken: boolean): Observable<HttpEvent<unknown>> => {
                    if (hasToken) {
                        const modifiedReq = request.clone({
                          headers: request.headers.set('X-XSRF-TOKEN', this.cookieService.get('XSRF-TOKEN')),
                        });

                        return next.handle(modifiedReq); 
                    }
                    
                    return httpClient.get(environment.apiUrl + '/csrf')
                                .pipe(
                                    switchMap((): Observable<HttpEvent<unknown>> => {
                                        const modifiedReq = request.clone({
                                          headers: request.headers.set('X-XSRF-TOKEN', this.cookieService.get('XSRF-TOKEN')),
                                        });

                                        return next.handle(modifiedReq); 
                                    })
                                );
                })
            );
}

【讨论】：