Angular 6-将JWT承载令牌添加到标头不起作用

Question

我试图在从asp.net core 2.2后端以角度6获取评论的同时添加auth承载令牌头

getComment(postId: number): Observable<IComment[]>{
    let headers = new HttpHeaders();
    headers.append('Content-Type', 'application/json');
    let authToken = localStorage.getItem('auth_token');
    headers.append('Authorization', 'Bearer ' + authToken);
    console.log(authToken);
    return this.httpClient.get<IComment[]>('api/comment/post/' + postId, { headers });
  }

这段代码不起作用。我从console.log（authToken）获取值。当我在Postman中复制令牌时，一切工作正常。

我在服务中的登录功能。这很好，我从后端获取令牌。

 login(login: ILogin) {
    console.log(login);
    return this.http
      .post('api/auth/login', login)
      .pipe(map((res: any) => {
        localStorage.setItem('auth_token', res.auth_token);
        this.loggedIn = true;
        this._authNavStatusSource.next(true);
        return true;
      }));
  }

当我从后端的操作中删除授权时，获取评论工作正常。正如您在下图中看到的那样，只是将jwt令牌未添加到标题中。

邮递员：

chrome的标题信息

Answer 1

当您说通过Postman可以正常工作，而这不是CORS问题（即，启用了CORS或从与API相同的来源提供JS）时，我认为您已经在订阅到返回的Observable<IComment[]>。

上面的代码只有在看起来像这样的地方调用时才会发出请求：

yourService.getComment(postId).subscribe(comments => { ... });

这将开始消耗Observable并触发基础HTTP请求。

Answer 2

您没有在{ headers }部分中传递标题。 将return this.httpClient.get<IComment[]>('api/comment/post/' + postId, { headers });更改为return this.httpClient.get<IComment[]>('api/comment/post/' + postId, { headers: headers });