Angular 5中HttpClientModule的GET请求如何正确传递请求头？

我看你从废弃的HttpModule切换到HttpClientModule后，遇到了请求头传递失败的问题，服务器返回detail:"Authentication credentials were not provided."错误，这是因为两者在请求头的处理逻辑上有不少差异，咱们一步步来解决：

问题根源 #

你当前的新getCurrentProfile方法里只创建了一个空的HttpHeaders实例，完全没有把认证所需的JWT Token添加进去，这就是服务器拒绝请求的核心原因。另外，HttpClient和旧的Http在响应处理、请求头类的使用上都有区别，得同步调整。

解决方案 #

1. 改造请求头生成方法 #

把原来返回RequestOptions的page_header方法，改成返回HttpClient需要的HttpHeaders对象：

private page_header(): HttpHeaders {
  const authToken = localStorage.getItem('auth_token');
  // HttpHeaders是不可变对象，set/append会返回新实例
  return new HttpHeaders().set('Authorization', `JWT ${authToken}`);
}

2. 更新Service中的请求方法 #

修改getCurrentProfile方法，正确传入带认证信息的请求头，同时注意HttpClient的响应处理差异：

export class UserService { 
  // 注意：实际代码里要删除旧的同名方法，避免冲突
  getCurrentProfile() { 
    const headers = this.page_header();
    // HttpClient默认会自动解析JSON响应，无需调用response.json()
    return this.http.get(this.userProfileUrl, { headers })
      .toPromise()
      .catch(this.handleError); 
  }; 
}

如果你更倾向于使用Observable而非Promise，也可以这样写：

getCurrentProfile() { 
  const headers = this.page_header();
  return this.http.get(this.userProfileUrl, { headers });
}

3. 优化Component中的调用逻辑 #

因为HttpClient已经帮你解析了JSON响应，所以不需要再手动从localStorage读取后解析，直接使用响应结果即可：

getStoreProfile() { 
  this.userSrv.getCurrentProfile().subscribe(
    res => {
      localStorage.setItem('store', JSON.stringify(res));
      this.profile = res; // 直接使用解析后的响应对象
    },
    err => this.error = err
  )
}

额外注意事项 #

• HttpHeaders的不可变性：和旧的Headers不同，HttpHeaders是不可变的，每次调用set或append都会返回一个新的实例，不要直接修改原对象。
• 响应自动解析：HttpClient的请求方法默认会将JSON响应解析为JavaScript对象，无需再调用.json()方法，这是和旧HttpModule的重要区别。
• 错误处理适配：如果你的handleError方法是针对旧HttpModule编写的，可能需要调整以适配HttpClient的错误响应结构。

内容的提问来源于stack exchange，提问作者CE0