Angular 5.0.0 HttpClient POST请求未携带Authorization Header问题求助

这问题我之前帮不少开发者排查过，结合你提到的「Postman能正常接收但Angular POST请求丢失Authorization Header」的情况，大概率是下面几个常见原因导致的，咱们逐一排查：

1. CORS预检请求（OPTIONS）未被服务器正确处理 #

这是最常见的原因！当Angular发送带自定义Header（比如Authorization）的POST请求时，浏览器会先自动发送一个OPTIONS预检请求，用来确认服务器是否允许这个自定义Header和请求方法。如果服务器没有正确响应OPTIONS请求（比如没返回Access-Control-Allow-Headers: Authorization），浏览器就会直接取消后续的POST请求，自然Authorization头就发不出去了。

而GET请求如果属于「简单请求」（比如没有自定义Header、Content-Type是常见的简单类型等），不会触发预检，所以能正常发送Header。

解决方法：配置PHP服务器处理OPTIONS请求 #

在你的PHP接口入口文件中添加以下代码，确保OPTIONS请求能正确返回允许的Headers和方法：

// 根据实际业务限制允许的域名，不要随便用*
header("Access-Control-Allow-Origin: http://your-angular-domain.com");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
// 必须包含Authorization，不然浏览器会拒绝发送带该Header的POST请求
header("Access-Control-Allow-Headers: Authorization, Content-Type");

// 直接处理OPTIONS请求，返回200状态码即可
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    http_response_code(200);
    exit;
}

2. Angular POST请求的Headers配置位置错误 #

很多开发者会不小心把Headers放到POST请求的body参数里，而不是options参数中，导致Header根本没被添加到请求中。

错误示例： #

// ❌ 把headers当成请求body传了，完全错误
this.http.post('/api/endpoint', {
  headers: new HttpHeaders().set('Authorization', 'Bearer ' + token)
});

正确示例： #

POST请求的第三个参数才是配置选项，Headers要放在这里：

// ✅ 正确写法：headers放在options里
const requestBody = { /* 你的请求体数据 */ };
const headers = new HttpHeaders().set('Authorization', 'Bearer ' + token);

this.http.post('/api/endpoint', requestBody, { headers });

3. HTTP拦截器只给GET请求添加了Authorization Header #

如果你的项目用了Angular的HTTP拦截器来统一添加Authorization Header，要检查拦截器代码是不是只针对GET请求做了处理，漏掉了POST。

错误示例： #

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  const token = localStorage.getItem('authToken');
  // ❌ 只给GET请求添加Header，POST会漏掉
  if (token && request.method === 'GET') {
    request = request.clone({
      setHeaders: {
        Authorization: `Bearer ${token}`
      }
    });
  }
  return next.handle(request);
}

正确示例： #

去掉请求方法的判断，确保所有请求都能带上Header：

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  const token = localStorage.getItem('authToken');
  if (token) {
    // ✅ 所有请求都克隆并添加Authorization Header
    request = request.clone({
      setHeaders: {
        Authorization: `Bearer ${token}`
      }
    });
  }
  return next.handle(request);
}

4. 请求Content-Type导致的预检问题 #

Angular默认发送POST请求时，Content-Type是application/json，这种类型会触发预检请求。如果服务器没有配置允许这个Content-Type，也会导致后续请求被拦截。不过这个问题通常会和第一个CORS问题一起出现，只要配置好Access-Control-Allow-Headers包含Content-Type就能解决。

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