为何本地环境可加载JS文件却无法加载本地JSON、XML文件？

该现象本质是浏览器对file://协议的默认同源策略限制，和“JSON比JS恶意性更高”的判定没有任何关系，两类资源加载表现的差异完全来自加载逻辑、历史兼容规则的区别：

• JS、CSS、图片这类资源，都是通过页面嵌入标签（<script>、<link>、<img>等）加载的被动嵌入类资源，web生态从早期开始就默认允许这类资源跨源加载——哪怕是公网站点，也可以自由嵌入其他站点的图片、公共JS库，这个规则是几十年兼容下来的既定逻辑，浏览器不会随便拦截。常规认知里JS安全风险更高是符合实际的，但这类通过标签嵌入加载的JS，运行时如果要读取本地其他文件的内容，照样要走后续的数据请求接口，一样会被安全规则拦截。
• JSON、XML这类资源，几乎都是通过fetch/XMLHttpRequest这类主动数据请求接口拉取的，这类接口可以自由读取响应的完整内容，浏览器对它的同源校验本来就最严格。早年file://协议未做相关限制时，只要恶意网页被下载到本地打开，就可以通过这类接口遍历读取用户本地同磁盘路径下的敏感文件（比如本地保存的账号记录、隐私文档），甚至往上跳转目录访问其他位置的文件，因此现代浏览器默认给file://源下的主动数据请求加了强限制，直接拦截非授权路径的拉取请求。

不存在“仅JSON/XML不能加载”的后缀黑名单，限制判定完全看资源的加载渠道，和文件后缀没有直接关系：

• 默认可正常加载的场景：通过嵌入标签加载的资源，不管后缀是JS、CSS、图片、字体、视频，只要是作为页面嵌入的静态资源，基本都能正常加载。
• 默认会被拦截的场景：所有走fetch/XMLHttpRequest接口主动拉取的资源，不管后缀是.json、.xml、.txt甚至是.js，只要是通过这类接口读取完整内容，默认都会被拦截。除此之外，部分浏览器下ES模块、WebAssembly这类底层复用fetch逻辑加载的资源，本地打开时也会加载失败。
• 补充说明：该规则没有统一的跨浏览器标准，不同厂商的实现宽松程度有差异：比如Firefox可以通过修改security.fileuri.strict_origin_policy配置项放开限制，Chrome可以通过启动参数--allow-file-access-from-files临时放开，但默认配置下都会严格拦截主动数据请求，没有公开的统一可加载/不可加载资源类型清单。

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