Chrome/Safari阻止用户触发的Blob URL下载（GitHub Pages沙箱报错）

问题根源 #

GitHub Pages的默认安全配置会对Blob URL的下载操作施加沙箱限制——即使你没主动使用iframe，浏览器在处理Blob生成的下载链接时，会将其上下文判定为沙箱环境，而默认配置未开启allow-downloads权限，导致Chrome和部分Safari弹出错误。

解决方案 #

方案一：自定义CSP头开启下载权限 #

在GitHub Pages项目根目录创建_headers文件，添加包含沙箱指令的CSP配置，明确允许下载操作：

/*
  Content-Security-Policy: sandbox allow-downloads allow-scripts allow-forms allow-top-navigation;

• 保留allow-scripts确保Vue应用正常运行，其他指令可根据你的业务需求调整（比如不需要弹窗就去掉allow-popups）。
• 提交文件到GitHub后，等待Pages重新部署，配置会自动生效。

方案二：修改下载逻辑绕开Blob URL限制 #

不用URL.createObjectURL生成Blob链接，改用data URI直接嵌入JSON内容，避免触发沙箱检查：

// Vue组件中的下载方法示例
const handleDownload = () => {
  // 假设userData是你要导出的用户操作数据
  const jsonStr = JSON.stringify(userData, null, 2);
  const a = document.createElement('a');
  // 直接用data URI生成下载链接
  a.href = `data:application/json;charset=utf-8,${encodeURIComponent(jsonStr)}`;
  a.download = 'user-data.json';
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
};

这种方式不需要创建Blob对象URL，直接通过内联数据触发下载，兼容性更好，也能避开沙箱限制。

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