Angular4中POST请求出现401未授权错误求助

嘿，我看了你提交数据时碰到的401未授权问题，先帮你揪出代码里的关键问题，再给你落地的修复方案～

首先，你的代码里藏着一个Angular开发者常踩的坑：HttpHeaders是不可变对象——你调用append方法后，原来的headers实例并不会被修改，必须把append返回的新对象重新赋值给变量，不然请求里根本没带上Authorization头！这大概率就是导致401的核心原因。

先贴出你的原代码片段方便对照：

addBike(data) { 
  let headers = new HttpHeaders(); 
  let authToken = localStorage.getItem('token'); 
  headers.append('Authorization','Bearer '+ authToken); 
  headers.append('Access-Control-Expose-Headers', 'Authorization'); 
  headers.append('Content-Type', 'application/x-www-form-urlencoded'); 
  console.log(headers.get('Authorization')); 
  this.http.post('link api',data,{headers: headers,responseType: 'text'}).subscribe(res => console.log(res),...

你可以验证下，这里的console.log(headers.get('Authorization'))打印的其实是undefined，因为原headers对象根本没被修改。

修复后的代码 #

直接用链式调用append（或者每次把返回值赋值给headers），确保Authorization头被正确添加：

addBike(data) { 
  let authToken = localStorage.getItem('token'); 
  // 链式调用append，每次都会返回新的HttpHeaders实例
  let headers = new HttpHeaders()
    .append('Authorization', 'Bearer ' + authToken)
    .append('Access-Control-Expose-Headers', 'Authorization')
    .append('Content-Type', 'application/x-www-form-urlencoded'); 
  
  console.log(headers.get('Authorization')); // 现在能正确打印出带Bearer的token了
  this.http.post('你的API链接', data, { headers: headers, responseType: 'text' })
    .subscribe(
      res => console.log(res),
      err => console.error('请求错误详情:', err) // 建议加上错误处理，方便排查后续问题
    );
}

额外排查点 #

如果修复后还是401，可以检查这几个地方：

• 确认localStorage里的token是否有效、没过期，直接在浏览器控制台执行localStorage.getItem('token')就能查看
• 检查Authorization头的格式：Bearer后面必须跟一个空格，服务器端是否能正确解析这个格式
• 跨域场景下，确认服务器已经配置了允许携带Authorization头的CORS规则

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