Angular TS文件中Fetch请求正常但HTTP Post请求失败，问题出在哪？

我在Angular的.ts文件中用Fetch语句能正常调用Stripe接口：

const fileResult = await fetch(environment.stripeFileUrl, {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer ' + environment.stripePublishableKey
  },
  body: data,
});
const fileData = await fileResult.json();

但改用Angular HttpClient实现时，返回状态码401，状态文本为Ok，同时提示API密钥不正确。是不是请求头设置有误？

无法正常工作的代码：

this.accountService.getStripeIdentityToken(data).subscribe(response => {
  if (response.error) {
    this.showError(response.error.message);
  } else {
    this.outputFile.emit({
      file: response.id,
      description: null
    });
  }
}, error => {
  console.log(error);
}).add(() => {
  this.loading(false);
});

// 服务中的方法
getStripeIdentityToken(data: any) {
  let headers = new HttpHeaders();
  headers = headers.set('Authorization', `Bearer ${environment.stripePublishableKey}`);
  // 也试过直接写密钥，还是报同样的错误
  // headers = headers.set('Authorization', `Bearer pk_test_fTr...BVLn9e6`);

  return this.http.post<any>(environment.stripeFileUrl, data, {
    headers
  });
}

1. 对比请求头的实际差异 #

用浏览器开发者工具（Network面板）查看两种请求的完整请求头：

• 确认Authorization头是否完整发送，密钥内容和fetch版本完全一致（注意Bearer后面的空格、密钥是否有截断）
• 检查Content-Type：如果fetch中data是FormData，浏览器会自动生成带boundary的multipart/form-data头；Angular HttpClient传FormData也会自动处理，但如果data是普通对象，会默认用application/json，这可能导致Stripe接口解析异常，进而误判密钥错误。

2. 简化HttpHeaders创建方式 #

虽然当前写法（重新赋值headers）符合HttpHeaders不可变的特性，但可以换更直观的写法避免潜在错误：

getStripeIdentityToken(data: any) {
  const headers = new HttpHeaders({
    'Authorization': `Bearer ${environment.stripePublishableKey}`
  });

  return this.http.post<any>(environment.stripeFileUrl, data, { headers });
}

3. 确保请求体格式完全一致 #

确认两种写法中data的类型完全相同：

• 如果fetch用的是FormData，HttpClient也要传入同一个FormData对象，不要转换成JSON对象
• 如果是JSON数据，给fetch手动添加Content-Type: application/json头，和HttpClient默认行为对齐

4. 检查HTTP拦截器是否篡改请求 #

如果项目中配置了HTTP拦截器，可能会自动修改Authorization头（比如添加自己的认证令牌），导致Stripe密钥被覆盖。可以临时移除拦截器测试，或者在拦截器中排除Stripe的请求URL。

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