Angular HttpClient报错：setRequestHeader执行失败，弃用ResponseContentType可用

问题背景 #

原弃用的请求配置代码：

static generateOptions() {
    return {
        'Accept': 'application/pdf',
        'Content-Type': 'application/pdf',
        'responseType': ResponseContentType.Blob
    };
}

改为Angular HttpClient写法后：

static generateOptions() {
    return {
      headers: new HttpHeaders({
        'Accept': 'application/pdf',
        'Content-Type': 'application/pdf',
      }),
      responseType: 'blob',
    };
}

调用该配置的POST请求代码：

generateDeparturePdf(item: any): Observable<any> {
    return this.http.post(this.config.get('apiroot') + '/reports/departure-pdf', item, ReportsService.generateOptions())
        .map((res) => {
            return res;
        })
        .catch((error: any) => {
            return error._body.text();
        }); 
}

出现错误：

ERROR DOMException: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': 'function () { _this.headers = new Map(); Object.keys(headers).forEach(function (name) { var /** @type {?} / values = headers[name]; var /* @type {?} */ key = name.toLowerCase(); if (typeof values === 'string') { values = [values]; } if (values.length > 0) { _this.headers.set(key, values); _this.maybeSetNormalizedName(name, key); } }); }' is not a valid HTTP header field value.

错误原因 #

这个错误源于HttpHeaders初始化方式异常：直接在构造函数中传入对象字面量时，部分Angular版本会出现内部方法被误解析为header值的情况；同时HttpHeaders作为不可变对象，直接传字面量的初始化逻辑在特定场景下会导致对象结构异常，最终传递给XMLHttpRequest时出现无效值。

解决方案 #

1. 改用append方法逐步构建HttpHeaders，确保对象正确初始化
2. 添加类型断言处理responseType的TS类型约束
3. 同步更新Observable操作符为新版pipeable写法，避免后续兼容问题

修正后的代码 #

1. 修正generateOptions方法 #

static generateOptions() {
  let headers = new HttpHeaders();
  headers = headers.append('Accept', 'application/pdf');
  headers = headers.append('Content-Type', 'application/pdf');

  return {
    headers: headers,
    responseType: 'blob' as 'json' // 类型断言绕过TS的默认类型约束
  };
}

注：Angular 7+也可以用更简洁的HttpHeaders.from()方法创建：

static generateOptions() {
  return {
    headers: HttpHeaders.from({
      'Accept': 'application/pdf',
      'Content-Type': 'application/pdf'
    }),
    responseType: 'blob' as 'json'
  };
}

2. 修正generateDeparturePdf方法 #

// 导入必要依赖
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

// 修正请求方法
generateDeparturePdf(item: any): Observable<Blob> {
  return this.http.post<Blob>(
    `${this.config.get('apiroot')}/reports/departure-pdf`,
    item,
    ReportsService.generateOptions()
  ).pipe(
    map(res => res), // 无需处理可直接省略
    catchError((error: any) => {
      // 适配新版HttpClient的错误结构
      return throwError(() => new Error(error.error?.text() || 'PDF生成请求失败'));
    })
  );
}

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