Angular无法读取自定义响应头：已暴露仍仅获Content-Type

以下是可能导致你无法读取authorization自定义头的几个原因及排查方法：

• 检查Access-Control-Expose-Headers的拼写与匹配
  确认后端配置的暴露头名称和前端要读取的完全一致，HTTP头名称大小写不敏感，但配置时不能出现拼写错误（比如把authorization写成authorizaton）。同时要确保Azure Function的响应中确实包含Access-Control-Expose-Headers头，且值里明确包含authorization（或Authorization）。

• 处理预检OPTIONS请求
  跨域场景下浏览器会先发OPTIONS预检请求，后端必须在OPTIONS请求的响应中也返回Access-Control-Expose-Headers头，否则浏览器会限制后续POST请求读取自定义头。检查你的Azure Function是否针对OPTIONS请求做了正确的响应处理，不要只在POST请求里设置暴露头。

• 确认Angular读取头的代码逻辑
  即使设置了observe: 'response'，也要确保读取头的代码正确。比如：

  this.http.post(url, data, { observe: 'response', responseType: 'text' })
    .subscribe(response => {
      // 浏览器会将响应头统一转为小写，注意匹配
      const authHeader = response.headers.get('authorization');
      console.log(authHeader);
    });
  

  避免拼写错误，比如写成auth而非authorization。

• 验证Azure Function是否正确设置响应头
  检查Node.js代码是否确实在响应中添加了authorization头，比如：

  context.res = {
    status: 200,
    body: 'response content',
    headers: {
      'Authorization': 'your-token-value',
      'Access-Control-Expose-Headers': 'Authorization'
    }
  };
  context.done();
  

  确保设置头的代码没有被提前返回的逻辑跳过（比如在设置头之前调用了context.done()）。

• 排查浏览器层面的干扰
  打开浏览器开发者工具的Network标签，找到对应的POST请求，查看Response Headers：

  • 确认authorization头是否存在
  • 确认Access-Control-Expose-Headers是否包含authorization
    如果这里看不到头，说明后端配置有问题；如果能看到但Angular读不到，再检查前端代码或缓存问题（可以强制刷新页面，关闭CORS相关插件后重试）。

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