使用Ajax下载MP3时Blob体积翻倍且文件损坏问题求助

嘿，这个问题我之前也踩过坑！核心原因是Ajax默认会把响应数据当成UTF-8文本解析，而MP3是二进制文件，文本编码转换会彻底破坏原始字节结构，这就是为什么你看到Blob大小翻倍、文件无法播放的原因。下面是具体的解决思路和代码调整方案：

1. 关键修改：设置Ajax的responseType为二进制类型 #

你需要告诉浏览器不要把响应当成文本处理，而是直接接收二进制数据。根据你用的是jQuery Ajax还是原生XMLHttpRequest，分别调整：

方案一：jQuery Ajax 调整 #

$.ajax({
  url: '你的下载接口地址',
  type: 'POST',
  responseType: 'blob', // 核心设置：让浏览器接收Blob类型数据
  success: function(data){
    // 这里的data已经是现成的Blob对象，无需手动转换！
    var link = document.createElement('a');
    var blobUrl = window.URL.createObjectURL(data);
    link.href = blobUrl;
    link.download = [[${videoInfo.title}]] + ".mp3";
    link.click();
    // 记得释放URL对象，避免内存泄漏
    window.URL.revokeObjectURL(blobUrl);
    link.remove();
  },
  error: function(xhr, status, err) {
    console.error('下载失败:', err);
  }
});

方案二：原生XMLHttpRequest 调整 #

如果是用原生XHR，同样需要设置responseType：

var xhr = new XMLHttpRequest();
xhr.open('POST', '你的下载接口地址');
xhr.responseType = 'blob'; // 关键设置
xhr.onload = function() {
  if (xhr.status === 200) {
    var blobData = xhr.response;
    // 后续下载逻辑和你之前的类似
    var link = document.createElement('a');
    var blobUrl = window.URL.createObjectURL(blobData);
    link.href = blobUrl;
    link.download = [[${videoInfo.title}]] + ".mp3";
    link.click();
    window.URL.revokeObjectURL(blobUrl);
    link.remove();
  } else {
    console.error('请求失败，状态码:', xhr.status);
  }
};
xhr.send();

2. 验证服务端响应头（你的代码基本没问题） #

你的服务端代码已经正确设置了：

• Content-LengthLong：告诉浏览器文件大小
• Content-Disposition：指定下载文件名
• Content-Type：设置为MP3的MIME类型

只需确认MP3_MIME_TYPE的值是标准的audio/mpeg，避免浏览器对文件类型识别错误。

为什么之前的代码会出错？ #

当你没有设置responseType时，Ajax会默认把响应数据当作UTF-8文本解析。二进制文件中包含很多非UTF-8兼容的字节（比如0x80及以上的字节），浏览器在解析时会将这些字节替换成Unicode替代字符（U+FFFD），导致最终的字节数翻倍，同时原始的MP3文件结构被完全破坏，自然无法播放。

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