Angular POST请求未携带请求头：无法传递username至后端的问题排查

先拆解你代码里的关键问题，再给出针对性的修复方案：

1. 重复声明覆盖了传入的data变量 #

你在函数参数里已经定义了data，但又在函数内部用let data = [data];重新声明了同名变量，这会直接覆盖掉原有的输入数据，把它变成一个只包含原data的数组。这不仅可能导致后端无法正确解析请求体，也可能间接干扰请求的正常发送逻辑。

2. 请求头不生效的补充排查点 #

你设置HttpHeaders的方式是正确的（因为HttpHeaders是不可变对象，必须通过set方法返回新实例并重新赋值），但如果还是看不到请求头，还要考虑两个常见场景：

• 跨域CORS配置问题：如果前后端不在同一域名下，自定义请求头username需要后端在CORS配置中明确允许这个头（比如在响应头里添加Access-Control-Allow-Headers: username），否则浏览器会在预检请求后过滤掉这个自定义头。
• 后端接收方式错误：确认后端是从请求头中获取username，而不是错误地从请求体里读取。

修正后的代码 #

public service(data: any) {
  let headers = new HttpHeaders();
  const usernameValue = 'test';
  // 避免覆盖原参数，若后端确实需要数组格式，可单独声明新变量
  // const requestData = [data];
  headers = headers.set('username', usernameValue);
  return this.http.post(`url`, data, { headers: headers, responseType: 'text' });
}

如果后端确实要求接收数组格式的请求体，可以改成const requestData = [data];后在post方法中传入requestData，但绝对不要用同名变量覆盖原输入参数。

另外，你不想用拦截器的思路是对的——拦截器是用来批量处理所有请求的场景，给单个请求单独加请求头的做法完全合理，只要修正上述变量覆盖的问题即可。

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