Angular 5中HttpClient调用API返回401 Unauthorized问题求助

遇到401 Unauthorized错误，核心原因几乎都是认证凭证无效或者没有正确传递，结合你的代码，我帮你梳理几个关键排查点和优化方案：

1. 优先检查Basic Auth的编码正确性 #

你的代码里用btoa("xxxxx:xxx")生成Basic Auth的凭证，但这里有两个容易踩的坑：

• 确认用户名和密码之间是严格的冒号分隔，没有多余的空格或其他字符。比如如果密码里包含冒号，你需要确保整个用户名:密码的字符串是API要求的正确格式。
• btoa()只支持ASCII字符，如果你的用户名/密码包含非ASCII字符（比如中文、特殊符号），这个方法会直接失效，导致编码后的凭证完全错误。这种情况你需要先把字符串转成UTF-8再编码，比如：

  const credentials = 'xxxxx:xxx';
  const encodedCredentials = btoa(unescape(encodeURIComponent(credentials)));
  

• 手动验证编码结果：把xxxxx:xxx复制到在线Base64编码工具，对比和代码中btoa()的输出是否一致，如果不一样，说明编码过程出了问题。

2. 确认HttpHeaders是否正确传递 #

Angular 5的HttpHeaders是不可变对象，你用链式append()的写法是对的，但可以换更简洁的对象初始化方式，避免潜在的链式调用问题：

const headers = new HttpHeaders({
  'Accept': 'application/json',
  'Content-Type': 'application/json',
  'Authorization': `Basic ${btoa('xxxxx:xxx')}`
});

另外，一定要打开浏览器的开发者工具（Network面板），找到这个请求，查看Request Headers里是否真的存在Authorization字段，并且值是Basic 你的编码结果。如果这个头没有出现，可能是跨域配置限制了头的传递（见下文）。

3. 检查API端的认证要求 #

• 确认API文档明确要求用Basic Auth，有些API可能用Bearer Token或者其他认证方式，用错方式肯定会返回401。
• 再次核对用户名和密码是否正确：是否有大小写错误、是否过期、是否是对应环境（测试环境/生产环境）的凭证。

4. 排查跨域（CORS）配置问题 #

如果你的前端项目和API域名不同，API端必须配置CORS允许Authorization头的传递。如果API的CORS配置里没有把Authorization加入Access-Control-Allow-Headers列表，浏览器会自动过滤掉这个头，导致API收不到认证凭证，返回401。

优化后的完整代码 #

另外，Angular 5的HttpClient已经默认把响应解析为JSON，所以responseType: 'json'和后面的map()操作都是多余的，可以去掉：

getShipmentStatus(id: number) {
  const credentials = 'xxxxx:xxx';
  const encodedCredentials = btoa(credentials);
  
  const headers = new HttpHeaders({
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    'Authorization': `Basic ${encodedCredentials}`
  });

  return this.http.get<any>(
    `https://test.p-44.com/api/v3/tl/shipments/${id}/statuses?includeMapUrl=true`,
    { headers }
  );
}

按照上面的步骤逐一排查，应该能定位到401的原因。

内容的提问来源于stack exchange，提问作者Pierre-Olivier Morin