问题描述
在前端开发中，我们经常需要通过 Blob 对象来生成文件并提供下载。其中一种常用的方式是使用 createObjectURL() 方法来创建一个 URL，并将其赋值给一个链接标签的 href 属性上，让浏览器自动下载该文件。例如：
const blob = new Blob(['hello world'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'hello.txt';
document.body.appendChild(link);
link.click();但是，有些用户反馈说这种方式在 Firefox 浏览器中无法正常工作，点击链接后无法下载文件。
分析原因
经过排查，我们发现这个问题与 Firefox 的安全策略有关。Firefox 限制了对于跨站点（Cross-Origin）资源的 download 属性的使用，只有在以下情况下才允许使用：
- 资源与当前页面在同一个域名下或是子域名下。
- 资源的服务器返回
Access-Control-Allow-Origin头信息，并且允许当前页面所在的域名访问。
在使用 createObjectURL() 方法生成的 URL 中，协议和域名都是 blob:，不符合上述要求。因此，在 Firefox 中，当我们点击链接时，浏览器会根据安全策略进行阻止，导致无法下载文件。
解决方法
解决这个问题的方法比较简单，只需要使用另一种方式来生成能够满足 Firefox 安全策略的 URL 就可以了。这里我们可以使用 Blob 对象的 text() 方法或者 FileReader 对象的 readAsDataURL() 方法来生成一个 Base64 编码的字符串，并将其作为链接地址即可：
-- -------------------- ---- ------- ----- ---- - --- ------------ -------- - ----- ------------ --- ----- ------ - --- ------------- --------------------------- ------------- - ---------- - ----- ---- - ---------------------------- --------- - -------------- ------------- - ------------ -------------------------------- ------------- --
上面的代码中，我们使用 FileReader 对象读取 Blob 对象中的内容，并通过 onload 事件获取到 Base64 编码的字符串，然后将其作为链接地址。这种方式在 Firefox 中也可以正常工作。
指导意义
在开发前端应用程序时，我们要时刻考虑到浏览器的安全策略，尤其是跨域资源访问的问题。为了避免出现类似上述问题，我们应该使用符合安全策略的方式来访问跨域资源，例如使用 CORS 或 JSONP 等技术，以及合适的认证和授权机制。
同时，在遇到类似问题时，我们要深入分析问题的原因，并寻找合适的解决方法。在上述问题中，我们通过学习 Firefox 的安全策略，以及使用 FileReader 对象来生成 Base64 编码的链接地址，解决了这个问题。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28163