Angular中POST请求未发送Header参数的问题排查与解决

哥们，你这问题的根源太明显了——你把headers参数放错地方了！

Angular的HttpClient.post()方法参数结构是固定的：
post(url: string, body: any, options?: { headers?: HttpHeaders | { [header: string]: string | string[]; }; ... })

你之前的写法把headers当成了请求体（第二个参数）的一部分，浏览器自然不会把它识别成请求头，反而会把它当作普通表单字段发给后端，所以控制台里根本看不到这个Header。

正确的写法分两种场景： #

场景1：仅修正Header位置（后端兼容JSON格式请求体）

doLogin(username, password){
  // 定义请求头配置
  const requestHeaders = { 
    'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8' 
  };
  // 把headers放到第三个配置参数里，而非请求体中
  return this.http.post(
    Config.BASE_URL + '/login', 
    { username: username, password: password }, 
    { headers: requestHeaders }
  );
}

场景2：标准表单格式适配（后端严格要求x-www-form-urlencoded）

如果后端只接受表单格式的请求体，光改Header位置还不够，得用HttpParams构建符合格式的请求体：

// 记得先导入依赖
import { HttpHeaders, HttpParams } from '@angular/common/http';

doLogin(username, password){
  const headers = new HttpHeaders({
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
  });
  // 用HttpParams构建表单格式的请求体
  const formBody = new HttpParams()
    .set('username', username)
    .set('password', password);
  
  return this.http.post(
    Config.BASE_URL + '/login', 
    formBody, 
    { headers: headers }
  );
}

这样修改后，再去控制台查看请求，就能看到你设置的Content-Type Header了，请求体也会匹配后端的格式要求。

内容的提问来源于stack exchange，提问作者J. Doe