Angular8登录POST请求报400：自定义请求头未生效问题排查

哈哈，这个问题我之前刚踩过坑！你的代码里有两个关键问题导致请求头不生效和400错误，我来给你拆解下：

1. HttpHeaders是不可变对象，你的赋值方式错了 #

你现在的写法是创建一个headers实例后调用set方法，但HttpHeaders的set方法不会修改原对象，而是返回一个全新的headers实例。所以你原来的headers其实还是初始的空对象，自然不会带上你设置的请求头。

正确的做法是每次调用set后把返回值重新赋值给headers，或者直接链式调用：

// 方式1：链式调用（更简洁）
let headers = new HttpHeaders()
  .set("Content-Type", "application/x-www-form-urlencoded")
  .set("Accept", "application/json");

// 方式2：逐次赋值
let headers = new HttpHeaders();
headers = headers.set("Content-Type", "application/x-www-form-urlencoded");
headers = headers.set("Accept", "application/json");

2. Payload格式不匹配Content-Type要求 #

当你设置Content-Type: application/x-www-form-urlencoded时，后端期望的是类似username=xxx&password=xxx的表单编码格式，而不是JSON对象。你直接传{"username": username, "password": password}的话，后端解析失败就会返回400错误。

正确的做法是用HttpParams来构建符合格式的请求体：

let payload = new HttpParams()
  .set('username', username)
  .set('password', password);

修正后的完整代码 #

把上面的两点修改整合后，你的login方法应该是这样的：

login(username: string, password: string) {
  // 正确构建请求头
  let headers = new HttpHeaders()
    .set("Content-Type", "application/x-www-form-urlencoded")
    .set("Accept", "application/json");

  // 用HttpParams构建符合格式的请求体
  let payload = new HttpParams()
    .set('username', username)
    .set('password', password);

  let response = this.http.post<any>(`${environment.BASE_URL}/api/auth/login`, payload, { headers });
  console.log(response);
  return response;
}

这样修改后，请求头会正确带上你设置的Content-Type，请求体格式也完全符合后端要求，应该就能解决400错误了。

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