Ionic4使用Native HTTP获取Blob图片时遇headers格式错误问题

我来帮你梳理下这个问题的原因和解决方案：

报错的核心原因：get()方法参数顺序搞混了 #

原生@ionic-native/http的get()方法和你用的sendRequest()参数格式完全不同！get()的第二个参数是请求参数（键值对），第三个才是headers对象——如果直接把headers当成第二个参数传，就会触发"headers" option needs to be an dictionary style的错误，因为它把headers解析成了请求参数，格式自然不对。

方案1：正确使用get()方法获取Blob #

如果想继续用get()方法，要注意参数顺序，并且通过setResponseType()提前设置响应类型：

import { HTTP } from '@ionic-native/http/ngx';
import { from } from 'rxjs';
import { finalize } from 'rxjs/operators';

constructor(private nativeHttp: HTTP) {}

getAttachmentWithNativeHttp(url: string, parameters?: any): Observable<any> {
  url = url + this.commonService.getQueryString(parameters);
  const headers = this.getHeaders('GET', url);
  
  this.nativeHttp.clearCookies();
  this.nativeHttp.setServerTrustMode('nocheck');
  // 提前设置响应类型为blob
  this.nativeHttp.setResponseType('blob');

  // get方法参数顺序：url, 请求参数（无则传{}）, headers
  return from(this.nativeHttp.get(url, {}, headers)).pipe(
    finalize(() => {
      if (toIntercept) this.setProgressDialogVisibility(false);
    })
  );
}

方案2：继续使用sendRequest()（你的原有方式） #

如果偏好sendRequest()，要确保你的getHeaders()方法返回的是标准的字典对象（比如{ 'Authorization': 'Bearer token', 'Accept': 'image/png, image/jpeg' }），不能是数组、嵌套对象或者其他非键值对格式。

你的原有代码里responseType: 'blob' as 'blob'的写法是没问题的，只要headers是合法的键值对，就不会报错。

额外注意事项 #

• 务必区分原生HTTP和Angular HttpClient的参数格式：前者的get()/post()方法参数顺序固定，后者是通过配置对象传所有参数，别搞混！
• 如果getHeaders()方法里有特殊处理，比如返回了非纯对象，一定要调整它的返回值，保证是标准的键值对字典。

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