Angular 5使用获取到的Token发起请求遇401未授权问题求助

嘿，我帮你梳理下这个401错误的原因，看了你的代码后，发现几个关键问题：

1. HttpHeaders是不可变对象，append操作没生效 #

Angular里的HttpHeaders是不可变类型，也就是说你调用append()方法后，原headers对象不会被修改，而是返回一个包含新头信息的新实例。你现在的代码只是调用了headers.append()但没把返回值重新赋值回去，导致最终发送请求时根本没带上Authorization头——这是触发401最核心的原因！

修改后的AuthService.ts应该是这样：

getProfile(){ 
  this.loadToken(); 
  let headers = new HttpHeaders(); 
  // 必须接收append返回的新实例，否则头信息不会更新
  headers = headers.append('Authorization', this.authToken); 
  headers = headers.append('Content-Type', 'application/json'); 
  // 注意：你的错误日志里请求的是/users/profile，但代码里写的是/users/authenticate，这明显是笔误！要改成正确的获取用户信息接口
  return this._http.get('http://localhost:8080/users/profile', {headers: headers}).pipe(map(res => res)); 
}; 
loadToken() { 
  // 调整顺序：先从localStorage取Token再打印，避免先打印undefined
  this.authToken = localStorage.getItem('id_token'); 
  console.log('当前Token:', this.authToken); 
}

或者更简洁的写法，直接在创建HttpHeaders时传入配置对象，省得反复append：

getProfile(){ 
  this.loadToken(); 
  const headers = new HttpHeaders({
    'Authorization': this.authToken,
    'Content-Type': 'application/json'
  }); 
  return this._http.get('http://localhost:8080/users/profile', {headers}).pipe(map(res => res)); 
}; 

2. 接口地址明显不匹配（疑似笔误） #

看你的错误输出，实际请求的URL是http://127.0.0.1:8080/users/profile，但你代码里getProfile()方法写的是http://localhost:8080/users/authenticate——这两个地址完全不一样！authenticate一般是登录验证接口，而profile才是获取用户信息的接口，这肯定是你写代码时的笔误，必须修正接口地址，不然哪怕头信息正确，请求错了接口也会出问题。

额外要检查的点 #

• 确认Token格式是否正确：很多后端要求JWT Token要带上Bearer 前缀，比如Authorization: Bearer xxxxxxx，如果你的后端是这种要求，记得拼接时加上：

  'Authorization': `Bearer ${this.authToken}`
  

• 验证localStorage里的id_token：打开浏览器控制台，输入localStorage.getItem('id_token')，看看返回的内容是不是你预期的有效Token。
• 检查CORS配置：虽然401是权限错误，但如果后端没配置允许你的前端域名跨域请求，也可能间接导致请求异常，不过你用Postman能成功，这个概率相对低，但也可以确认下。

按照上面的修改和检查，应该就能正常带上Token发起请求，解决401的问题了。

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