使用Fetch API调用Firebase Storage URL报错TypeError: Failed to fetch的问题

以下是几个可能的原因及对应解决方案：

• URL跟踪参数干扰：你提供的URL包含_gl、_ga这类谷歌分析自动添加的跟踪参数，这类参数不属于Firebase Storage的合法请求参数，会触发拦截。直接移除这些参数后重试：

  fetch('https://firebasestorage.googleapis.com/v0/b/gigameshmusic.appspot.com/o/audio%2Fpreviews%2FOne%20More%20Time%20%5Bpreview%5D.mp3?alt=media&token=28ccfa80-6245-4201-9449-aeb8bed15c25')
  

• Fetch请求模式不匹配：<img>标签属于简单请求，而Fetch默认使用cors模式，若你的运行环境（如浏览器扩展、特殊内嵌上下文）有额外限制，可显式设置mode: 'no-cors'（注意此模式下无法读取响应内容，仅适用于获取资源）：

  fetch('你的资源URL', { mode: 'no-cors' })
  

• 下载令牌过期：URL中的token是Firebase Storage的临时下载凭证，若令牌已过期会导致请求失败。可登录Firebase控制台，找到对应文件重新生成下载令牌并替换。

• 请求头差异导致拦截：<img>标签发送的请求头与Fetch默认头存在差异，比如<img>会发送对应资源类型的Accept头，而Fetch默认发送Accept: */*。手动设置匹配的Accept头尝试：

  fetch('你的音频URL', {
    headers: {
      'Accept': 'audio/mpeg' // 图片资源可改为image/png、image/jpeg等对应类型
    }
  })
  

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