本地HTML不依赖Node.js或服务器能否加载本地JSON文件？

不是必须把JSON数据嵌入HTML文件本身，除了嵌入方式，还有几个无需服务器或Node.js的可行方案：

方案1：修改浏览器启动参数（仅用于开发测试） #

主流浏览器支持关闭本地文件的CORS限制，操作方式如下：

• Chrome/Edge：在浏览器快捷方式的目标栏末尾添加 --allow-file-access-from-files（注意参数前有空格），重启浏览器后打开你的HTML文件，即可正常用fetch加载本地JSON。
• Firefox：在地址栏输入 about:config，找到security.fileuri.strict_origin_policy选项，将其值改为false，重启浏览器后生效。

方案2：将JSON转为JS变量单独引入 #

把JSON数据放到独立的.js文件中，赋值给全局变量：

// data.js
window.jsonList = [
  {"id": 1, "name": "示例1"},
  {"id": 2, "name": "示例2"}
];

在HTML中先引入这个JS文件，再直接使用变量：

<script src="data.js"></script>
<script>
  console.log(jsonList); // 直接访问全局变量获取数据
</script>

方案3：通过<script>标签加载JSON文件 #

利用浏览器允许<script>标签加载本地资源的特性，指定类型为application/json，再通过DOM读取内容：

<script type="application/json" id="jsonSource" src="FileWithObjects.json"></script>
<script>
  const jsonContent = document.getElementById('jsonSource').textContent;
  const List = JSON.parse(jsonContent);
  console.log(List);
</script>

如果是开发阶段临时测试，方案1最简便；如果需要更规范的本地加载方式，方案2或3更合适，都不需要依赖服务器环境。

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