Angular 6:HttpHeaders无法在Chrome和IE11中读取null的属性“长度”(在Firefox中不如此)

时间:2018-07-13 11:21:46

标签: javascript angular rest google-chrome angular-httpclient

在我的 Angular6 应用程序下,我正在使用 HttpClient ,并在htpp调用中注入了一些标头,以便从后端服务器获取数据:

我的服务:

@Injectable()
export class LoadUserInfosService {

  public _headers = new HttpHeaders().set('Content-Type', 'application/json');

  constructor(private httpClient: HttpClient) {}

  getUserPnsInfos(cuid): Observable<object> {
    const headers = this._headers.append('login', login);
    return this.httpClient.get(myBackUrl, {headers: headers});
  }
}

我要订阅的组件:

loadUserInfosFromPns(login) {
    this.loadUserInfosService.getUserPnsInfos(login).subscribe(infos => {
      let receivedInfos: any;
        receivedPnsInfos = infos ;
        console.log(receivedPnsInfos);
        if (pnsInfos !== null && receivedPnsInfos.cuid === cuid ) {
        } else {
          this.router.navigate(['unauthorized'], {skipLocationChange: true});
        }
      },
      error => {
        console.log(error);
      });
  }

在Chrome或IE11上运行时,引用我的请求标头时出现一些错误:

TypeError: Cannot read property 'length' of null
    at HttpHeaders.push../node_modules/@angular/common/fesm5/http.js.HttpHeaders.applyUpdate (http.js:199)
    at http.js:170
    at Array.forEach (<anonymous>)
    at HttpHeaders.push../node_modules/@angular/common/fesm5/http.js.HttpHeaders.init (http.js:170)
    at HttpHeaders.push../node_modules/@angular/common/fesm5/http.js.HttpHeaders.forEach (http.js:235)
    at Observable._subscribe (http.js:1445)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:161)
    at subscribeTo.js:21
    at subscribeToResult (subscribeToResult.js:6)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._innerSub (mergeMap.js:127)

此错误仅出现在 Chrome IE11 中-而在 Firefox 下, 请求正常了,没有得到

有什么想法和建议吗?

2 个答案:

答案 0 :(得分:2)

这可能是由于您在某些http请求中设置了一个未定义的/空标头所致。

答案 1 :(得分:0)

我遇到了同样的问题,但是在刷新页面时,我遇到了require API并通过参考一些示例并将以下行添加到httpClient(http:httpClient)中解决了该问题

 return this.http.get('url, {header}).pipe(
        retry(1), catchError(this.handleError)
      )
rxjs运算符

导入

重试和捕获错误

从“ rxjs / operators”导入{catchError,映射,重试};

handleError 是处理错误的功能

这为我解决了错误