在 Angular 5 中将标头添加到 POST 请求的位置？

Question

我正在尝试上传一张图片并向 spring rest 控制器发送一个 post 请求，以便它可以保存它。

我正在使用 jwt，所以我需要在 POST 请求中传递 JWT 标头。

这是 UploadFile.service.ts

pushFileToStorage(file: File): Observable<HttpEvent<{}>> {

    if(this.authService.getToken()==null) {
      this.authService.loadToken();
    }
    const formdata: FormData = new FormData();

    formdata.append('file', file);

    const req = new HttpRequest('POST', this.host+'/post', {
  reportProgress: true,
  responseType: 'text'
});

    return this.http.request(req);
  }

我想知道我可以在哪里添加标题：

{headers:new HttpHeaders({'Authorization':this.authService.getToken()})} 

在发布请求中，我尝试将其添加到 {reportProgres ..} 后面，但它似乎不正确，因为我收到有关标题的错误。

有什么想法吗？

这是我正在尝试的，但它就像'init'而不是选项：

我正在使用 HTTPCLIENT

Answer 1

如果需要频繁设置header，可以使用interceptors。

@Injectable()
export class TokenInterceptor implements HttpInterceptor {

    constructor(private authService: AuthService) { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpSentEvent | HttpHeaderResponse | HttpProgressEvent | HttpResponse<any> | HttpUserEvent<any>> {
        const req = r.clone({
            headers: r.headers.set('Authorization', this.authService.getToken()),
            body: req.body
        });
        return next.handle(req);
    }
}

export const tokenInterceptorProvider = {
    provide: HTTP_INTERCEPTORS,
    useClass: TokenInterceptor,
    multi: true
};

将其添加到模块的providers。

@NgModule({
     providers: [tokenInterceptorProvider]
})

Answer 2

constructor(private http: Http) { }
  let neededHeaders = new HttpHeaders(); 
  neededHeaders.append('Authorization', this.authService.getToken());
  const req = this.http.post(this.host+'/post', body, {headers: neededHeaders, reportProgress: true, responseType: 'text'});

From the documentation

post(url: string, body: any | null, options: {
  headers?: HttpHeaders | {
        [header: string]: string | string[];
    };
   reportProgress?: boolean;
   responseType: 'text';
});