Angular 5跨域请求无法获取服务器Authorization头问题

我来帮你一步步排查和解决这个典型的前后端对接问题：

1. 优先检查后端CORS配置 #

这是最常见的根源——浏览器同源策略的限制：默认情况下，CORS响应里只有"简单头"（比如Content-Type、Cache-Control）能被前端访问，像Authorization这类非标准头，必须后端明确配置允许暴露：

• 后端需要在响应中添加 Access-Control-Expose-Headers: Authorization 头，告诉浏览器这个头可以被前端读取。
• 不管你用的是Spring Boot、Node.js还是其他后端框架，都要在跨域规则里把Authorization加入暴露的头列表。

2. 修正Angular中获取响应头的方式 #

在Angular 5的HttpClient中，默认请求只会返回响应体，不会包含完整的响应头信息。要拿到Authorization头，你必须在请求时指定observe: 'response'：

// 正确的请求示例
this.http.post('/api/login', yourCredentials, { observe: 'response' })
  .subscribe(response => {
    // 这里才能获取完整的响应头
    const authHeader = response.headers.get('Authorization');
    console.log('Authorization头内容:', authHeader);
    if (authHeader) {
      localStorage.setItem('token', authHeader);
    }
  }, error => {
    console.error('请求失败:', error);
  });

如果之前没设置observe: 'response'，直接去拿headers必然是null，因为默认只返回响应体数据。

3. 排查异步操作的时序问题 #

你提到localStorage中的token为null，很大概率是你在响应还没返回时就去读取localStorage了。比如这种错误写法：

// 错误示例：异步请求未完成就读取存储
this.http.post('/api/login', yourCredentials).subscribe();
const token = localStorage.getItem('token'); // 这里肯定是null，请求还没结束

一定要把存储token的逻辑放在subscribe的回调函数里（或者用async/await处理Promise），确保是在响应返回后再执行存储和读取操作。

4. 确认响应头名称的大小写 #

有些服务器返回的头名称是小写的authorization，而你用response.headers.get('Authorization')去拿就会找不到。可以先打印所有响应头的键，确认实际名称：

this.http.post('/api/login', yourCredentials, { observe: 'response' })
  .subscribe(response => {
    console.log('所有响应头名称:', response.headers.keys()); // 打印所有头，确认大小写
  });

之后用实际的名称去获取头值即可。

最后验证步骤 #

按上面的调整后，重新发起请求：

1. 打开浏览器开发者工具的Network标签，找到对应请求，查看Response Headers，确认Authorization和Access-Control-Expose-Headers都存在。
2. 在Angular的subscribe回调中打印response.headers.get('Authorization')，确认拿到值后再存入localStorage。

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