web-dev-qa-db-ja.com

HttpClientは空の応答を解析できません

ヘッダーにトークンを追加するインターセプターがあります。ただし、POSTリクエスト後に使用した場合、サブスクリプションのオブザーバーがトリガーされません。

インターセプター：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
this.authService = this.inj.get(AuthService);
if (!this.authService.isLoggedIn()) {
  return next.handle(req);
}

const changedReq = req.clone({headers: req.headers.set('Authorization', `Bearer ${this.authService.getToken()}`)});
return next.handle(changedReq);
}

サービス：

saveBeer(beerForm: BeerForm): Observable<Response> {
let body = JSON.stringify(beerForm);
let headers = new HttpHeaders({
  'Content-Type': 'application/json'
});

return this.http.post(this.apiUrl, body, {headers: headers});
}

成分：

onSubmitCreateBeer(): void {
this.beerService.saveBeer(this.beerForm)
  .takeUntil(this.ngUnsubscribe)
  .subscribe(
    (response: Response) => {
      // On response
      this.router.navigate(['/beers']);
    }, error => {
      // On error
    }, () => {
      // On complete
    });
}

私の問題は、応答がトリガーされないため、ナビゲーションステップが機能しないことです。インターセプターを無効にすると、すべてが機能します。

何か案は？

angularobservableinterceptor
6
Teodor Dimitrov

うまくいきました。問題は、私の観察者が応答でjsonを期待していたことでした。ただし、200 OKを取得した後、応答には本文に何も含まれていません。これはエラーなので、エラー関数が呼び出されました。

解決策1は、responseType：textを設定することです。

saveBeer(beerForm: BeerForm): Observable<any> {
let body = JSON.stringify(beerForm);
let headers = new HttpHeaders({
  'Content-Type': 'application/json'
});

return this.http.post(this.apiUrl, body, {headers: headers, responseType: 'text'});
}

ソリューション2は、バックエンドから204を返すことです。

どちらも今のところ問題なく動作します。これに関するバグレポートがあります：

https://github.com/angular/angular/issues/1868

17
Teodor Dimitrov

私の回避策は、ステータスコードが200のときにエラーをキャッチし、代わりに本文がnullのHttpResponseを返すHttpInterceptorです（ちょうどHttpClientが204 Not Content応答で行うように）。

@Injectable()
export class EmptyResponseBodyErrorInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return next.handle(req)
  .catch((err: HttpErrorResponse) => {
    if (err.status == 200) {
      const res = new HttpResponse({
        body: null,
        headers: err.headers,
        status: err.status,
        statusText: err.statusText,
        url: err.url
      });
      return Observable.of(res);
    } else {
      return Observable.throw(err);
    }
  });
 }
}
1
Naveen Dahiya