如何从URL.createObjectURL生成的blob URL中取回原始Blob对象

为什么存在本地内存的 Blob URL 会触发 CORS #

这个限制和资源存储位置无关，是浏览器的强制安全策略：所有 blob URL 都会绑定生成它的脚本上下文的源，只有同源上下文的脚本才有访问权限。哪怕资源确实存在你本地的浏览器内存里，跨源的访问请求（比如在其他站点的控制台发起请求、浏览器扩展脚本跨页面访问）都会被 CORS 拦截，核心目的是防止恶意脚本跨页面窃取其他站点生成的敏感数据，比如用户还没提交的隐私上传文件、接口返回的敏感二进制内容等。

如何在控制台访问 blob URL 对应的原始对象 #

必须在生成该 blob URL 的同域页面下操作才有权限，常用两种方案：

• 劫持 URL.createObjectURL 提前存映射：如果允许刷新页面，先在控制台运行以下代码，再刷新页面，之后所有生成的 blob URL 和对应的 Blob 对象都会存在全局 Map 里，直接取就行：

// 先运行这段再刷新页面
window.__blobCache = new Map();
const originalCreate = URL.createObjectURL;
URL.createObjectURL = function(blob) {
  const url = originalCreate.apply(this, arguments);
  window.__blobCache.set(url, blob);
  return url;
}

// 获取对应 blob 的代码示例
// const targetBlob = window.__blobCache.get('blob:https://www.example.com/0ea6c8a8-732f-42c7-9530-4805c4e785f5')

• 同域下直接 fetch：如果 URL 已经生成，在同域页面的控制台运行你写的 let blob = await fetch(url).then(r => r.blob()); 不会触发 CORS，你之前报错就是因为操作的页面和 blob URL 绑定的源不一致。

视频场景下 Blob 实际存储的内容 #

分两种场景：

• 小体积短视频：普通 Blob 对象会存储完整的视频二进制内容，只要内存占用在浏览器允许的范围内（单 Blob 通常最大可支持数百 MB），就可以完整存在内存中。
• 大体积视频/流媒体：你看到的 blob URL 绑定的不是普通 Blob，而是 MediaSource 对象。它不会存储完整视频，只维护当前播放进度前后的小段缓冲分片，播放器拉取的 m3u8 清单、ts 分片等内容会按播放需求动态喂给 MediaSource，由浏览器自动管理缓冲的生命周期，所以就算你拿到对应的 blob URL，也读不到完整的视频内容。

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