首页 > 解决方案 > Angular:使用观察选项时的请求标头问题

问题描述

我想显示文件上传的进度百分比。在我的角度应用程序上。

我按照这里的说明进行操作。但问题是我的请求必须经过身份验证,并且我的 jwt 拦截器不会将标头应用于请求,因此会产生 401 错误。我尝试将标头添加到 http 选项中,但它都不适用。我尝试了这个和许多其他想法,但我仍然有 401error 或没有 EventObserver。

有谁知道我错在哪里或有解决方案?

在我的服务中:

 sendDocument(document_type, file, mode) {

    const uploadData = new FormData();
    uploadData.append(document_type, file, file.name);
    uploadData.append('mode', mode);

    let currentUser = this.authenticationService.currentUserValue;
    let options: object = {
      headers: new HttpHeaders({Authorization: `Bearer ${currentUser.token}` }),
      reportProgress: true,
      observe: 'events'
    }

    return this.http.post(`${this.apiUrl}user/sendDocument`, uploadData, options);
}

拦截器:

export class JwtInterceptor implements HttpInterceptor {
  constructor(private authenticationService: AuthenticationService) {}
  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    let currentUser = this.authenticationService.currentUserValue;
    if (currentUser && currentUser.token) {
      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${currentUser.token}`,
        },
      });
    }
    return next.handle(request);
  }
}

标签: angularhttprequestheader

解决方案


推荐阅读