Angular中HttpClient未发送Authorization请求头问题排查

首先看你的代码和请求头信息，Authorization请求头未成功发送主要有两个核心原因，咱们一步步排查解决：

1. HttpClient请求配置格式错误 #

Angular的HttpClient.get()方法的第二个参数需要是完整的请求配置对象，而不是直接传递headers或者token字符串。

你当前代码里的this.http.get(API_URL + '/validate-email/' + email, this.getToken())，如果getToken()只是返回token值或者单独的HttpHeaders对象，Angular不会将其识别为请求头配置，自然不会把它添加到请求中。

修正方式： #

确保getToken()返回包含headers属性的配置对象：

import { HttpHeaders } from '@angular/common/http';

// 调整你的getToken方法
getToken(): { headers: HttpHeaders } {
  // 假设你的token存储在localStorage或其他位置
  const authToken = localStorage.getItem('auth_token');
  return {
    headers: new HttpHeaders({
      'Authorization': `Bearer ${authToken}` // 注意Bearer前缀，需根据后端要求调整
    })
  };
}

// 调用方式保持不变即可
return this.http.get(`${API_URL}/validate-email/${email}`, this.getToken());

如果你的getToken()原本只是返回token字符串，也可以直接在请求中构建配置：

return this.http.get(`${API_URL}/validate-email/${email}`, {
  headers: new HttpHeaders({
    'Authorization': `Bearer ${this.getToken()}`
  })
});

2. 服务器CORS配置未允许Authorization头 #

从你提供的响应头可以看到：

Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept

这里并没有包含Authorization字段。浏览器在发送携带自定义头（比如Authorization）的跨域请求时，会先发送OPTIONS预检请求，如果服务器没有明确允许这个头，浏览器会拦截实际的请求，不会带上Authorization头。

服务器端修正（以Express框架为例）： #

如果使用cors中间件，需要把Authorization加入到允许的headers列表：

const cors = require('cors');

const corsOptions = {
  origin: '*', // 生产环境建议指定具体域名，不要使用通配符*
  allowedHeaders: ['Origin', 'X-Requested-With', 'Content-Type', 'Accept', 'Authorization']
};

app.use(cors(corsOptions));

额外检查点 #

• 确认你的token值有效，没有过期或格式错误（比如后端要求带Bearer前缀，你是否正确添加）
• 调用getToken()时，确保能正确获取到token，不会返回null或空字符串

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