Ionic 4/Capacitor中GET请求获取Blob，移动端返回空对象的问题排查

我之前也碰到过类似的移动端Blob处理坑，结合你的场景，给你几个实用的排查和解决思路：

1. 先确认响应头的Content-Type兼容性 #

移动端WebView对响应头的要求比桌面Chrome更严格，首先得检查服务器返回的Content-Type是不是严格匹配目标文件类型（比如PDF的application/pdf、图片的image/jpeg）。如果服务器返回的是application/octet-stream这类模糊类型，移动端可能无法正确解析成Blob对象。

你可以给请求加上observe: 'response'配置，直接查看完整响应头：

this.httpClient
  .get(specSheet.link, { 
    responseType: 'blob',
    observe: 'response' // 开启后能拿到完整响应对象
  })
  .subscribe(response => {
    console.log('服务器返回的Content-Type:', response.headers.get('Content-Type'));
    console.log('响应体:', response.body);
  })

2. 手动将ArrayBuffer转为Blob #

不少移动端WebView会把Blob对象在控制台显示为空（其实是Blob的属性不可枚举，调试工具无法展示），换个思路——先请求arraybuffer格式，再手动转成Blob，这种方式兼容性更好：

this.httpClient
  .get(specSheet.link, { responseType: 'arraybuffer' }) // 先获取二进制数组
  .subscribe(buffer => {
    // 手动指定文件类型，确保移动端能识别
    const blob = new Blob([buffer], { type: 'application/pdf' });
    console.log('手动转换后的Blob:', blob);
    // 后续下载逻辑直接用这个blob即可
  })

你的图片测试仓库也可以用这个方法试试，大概率能解决移动端的问题。

3. 检查CORS与请求头配置 #

移动端WebView的CORS策略有时候更苛刻，确认服务器是否允许你的App域名跨域请求，并且返回了正确的Access-Control-Allow-Origin等头。另外，给请求加上明确的Accept头，也能帮服务器更准确地返回对应格式：

this.httpClient
  .get(specSheet.link, { 
    responseType: 'blob',
    headers: {
      'Accept': 'application/pdf' // 明确告诉服务器接受的文件类型
    }
  })
  .subscribe(result => {
    console.log('带Accept头的请求结果:', result);
  })

4. 验证Blob是否真的为空 #

你看到的{}可能只是调试工具的显示bug，实际Blob对象是存在的。可以通过访问它的属性来验证：

.subscribe(result => {
  const blobResult = result as Blob;
  console.log('Blob实际大小:', blobResult.size);
  console.log('Blob实际类型:', blobResult.type);
  // 如果能打印出正确的size和type，说明对象没问题，只是调试工具的显示问题
})

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