Angular HttpClient发起POST请求失败但axios请求正常如何解决

可能的问题点 #

• 错误添加了响应头作为请求头：Angular代码中在请求头加了Access-Control-Allow-Origin: '*'，这个字段是服务端返回的响应头，不能放在客户端请求头中，会触发额外的CORS预检请求，预检失败后浏览器会直接拦截请求，就会出现provisional headers提示。你的axios代码中没有加这个头，所以可以正常发起请求。
• 请求体格式和Content-Type不匹配：你设置了Content-Type: application/x-www-form-urlencoded，axios会自动将普通对象类型的请求体序列化为表单格式，而Angular HttpClient不会做自动序列化，如果你传入的bytes没有提前处理为key=value&格式的字符串，会导致请求体格式错误，被服务端拒绝后请求中断。
• RXJS操作符逻辑导致请求被取消：你在map操作符中当multyStepsUpload为true时直接返回空值，后续的last()操作符会因为没有接收到有效的返回值抛出错误，主动终止未完成的请求。
• 全局HTTP拦截器干扰：Angular的全局HTTP拦截器如果存在逻辑问题，比如权限校验失败后没有调用next()传递请求、额外添加了其他跨域相关的请求头、强制开启了withCredentials配置，都会导致请求无法正常发出。
• 上传进度配置的额外影响：你手动创建HttpRequest时开启了reportProgress: true，如果没有配套配置事件监听逻辑，部分低版本Angular会出现请求状态异常的问题。

解决方案 #

1. 直接移除请求头中的Access-Control-Allow-Origin配置，CORS相关配置全部由服务端处理。
2. 保证请求体格式和Content-Type匹配：如果是提交表单数据，提前用HttpParams序列化请求体；如果是上传二进制文件，删除手动设置的Content-Type，让浏览器自动生成带边界的multipart/form-data请求头。
3. 调整RXJS逻辑：修改map内的返回逻辑，避免返回空值，或者将last()替换为takeLast(1)避免无值抛出错误。
4. 临时禁用所有HTTP拦截器测试请求是否正常，排查是否有拦截器逻辑干扰。
5. 对齐axios的默认配置，Angular请求添加responseType: 'json'，默认和axios返回结构一致。

修正后的代码示例 #

// 如果是表单数据，提前序列化
const body = new HttpParams({ fromObject: bytes });
// 如果是二进制文件，直接传bytes，不要手动设Content-Type

const req = new HttpRequest('POST', url, body, {
  headers: new HttpHeaders({
    // 仅当传序列化后的表单数据时保留这个头，传二进制删除
    'Content-Type': 'application/x-www-form-urlencoded',
  }),
  reportProgress: true,
  responseType: 'json' // 和axios默认配置对齐
});

return this.http.request(req).pipe(
  map((event) => {
    if (multyStepsUpload) {
      return null; // 不要返回undefined
    }
    return this.reportUploadEvent(event, file);
  }),
  takeLast(1) // 替换last避免空值报错
);

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