Blob链接刷新页面、隐身窗口访问被拦截问题如何解决

URL.createObjectURL() 生成的Blob URL是绑定当前浏览上下文生命周期的临时本地引用，不是持久化可跨环境访问的资源地址，属于浏览器标准设计逻辑，不是代码bug：

• 刷新页面、关闭当前标签页/窗口时，当前浏览上下文被销毁，浏览器会自动回收关联的Blob内存，原Blob URL直接失效
• 隐身窗口和普通窗口是完全隔离的独立浏览上下文，内存空间、存储资源完全不互通，根本访问不到普通窗口里生成的Blob对象，访问时自然会被拦截报错。

根据实际使用场景选择对应方案即可：

场景1：仅在当前站点内使用，要求刷新页面后链接仍有效 #

这种场景不需要跨窗口跨环境，不要只保存生成的Blob URL，要把原始文件的二进制数据存到当前源的客户端存储里，页面加载时重新生成有效的Blob URL即可：

• 体积小于5MB的小文件，可以转成ArrayBuffer后存在sessionStorage里
• 大文件必须用IndexedDB存储二进制数据，避免触发浏览器存储容量限制
  参考实现代码：

const input = document.getElementById("file")

// 页面初始化时读取存储的文件，重新生成有效Blob URL
window.addEventListener("load", async () => {
  const savedFile = sessionStorage.getItem("localSelectedFile")
  if (savedFile) {
    const buffer = Uint8Array.from(savedFile.split(","), Number).buffer
    const blob = new Blob([buffer])
    const validUrl = URL.createObjectURL(blob)
    console.log("刷新后重新生成的可用链接：", validUrl)
  }
})

input.addEventListener("change", async (e) => {
  const file = e.target.files[0]
  // 把文件二进制数据存入会话存储
  const fileBuffer = new Uint8Array(await file.arrayBuffer())
  sessionStorage.setItem("localSelectedFile", fileBuffer.toString())
  // 生成当前会话可用的Blob URL
  const url = URL.createObjectURL(file)
  console.log("当前会话可用链接：", url)
})

注意：每次生成新的Blob URL如果不再使用，要主动调用URL.revokeObjectURL()释放内存，避免内存泄漏。

场景2：需要跨窗口（含隐身窗口）访问、或者要持久保存/分享链接 #

原生Blob URL天生不支持跨独立浏览上下文访问，这类场景不能直接使用Blob URL，可选方案：

• 小文件场景：用FileReader.readAsDataURL()把文件转成Data URL。Data URL是包含完整文件内容的Base64字符串，不依赖浏览上下文，复制到任意窗口、任意环境打开都能正常访问，缺点是大文件生成的字符串长度极高，加载性能差。
• 同浏览器跨窗口场景：可以注册Service Worker拦截站点下自定义路径的请求，返回本地IndexedDB存储的Blob内容，实现自定义的持久化访问地址。
• 跨设备、跨浏览器分享场景：必须把文件上传到服务端存储，拿到服务端返回的HTTP资源链接才能正常访问。

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