无服务器环境下用JavaScript创建保存文件遇问题求助

问题根源 #

本地file://协议运行时，浏览器的安全策略会限制Blob对象和URL.createObjectURL()的正常交互；另外也可能是Blob构造时的参数格式有误，比如未正确指定MIME类型或JSON序列化异常。

可运行的修正代码 #

// 定义要保存的JSON对象
const targetJson = {
  username: "demo",
  content: "浏览器本地保存JSON测试"
};

// 序列化JSON并构造Blob对象
const jsonContent = JSON.stringify(targetJson, null, 2);
const jsonBlob = new Blob([jsonContent], { type: "application/json;charset=utf-8" });

// 创建下载链接并触发保存对话框
const downloadLink = document.createElement("a");
downloadLink.href = URL.createObjectURL(jsonBlob);
downloadLink.download = "saved-data.json";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
// 释放URL对象，防止内存泄漏
URL.revokeObjectURL(downloadLink.href);

本地运行的兼容配置 #

• Chrome：启动时添加命令行参数 --allow-file-access-from-files，解除本地文件的访问限制
• Firefox：在地址栏输入about:config，搜索security.fileuri.strict_origin_policy并设置为false，允许本地文件的跨源操作
• 注意：这些配置仅用于本地开发测试，日常浏览时建议恢复默认设置，避免安全风险

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