为什么 fetch 请求本地 JSON 文件会跨域？

这问题其实挺常见的，浏览器在 file:// 协议下对跨域限制特别严格。简单说就是当你直接用文件协议打开 HTML 文件时，浏览器把每个文件都当成独立的源，即使它们在同一目录。

fetch 请求同目录的 JSON 文件时，浏览器认为这是从一个源（file:///）去请求另一个源（还是 file:///），于是触发了 CORS 机制。这种情况下浏览器不会发 OPTIONS 预检请求，而是直接报错。

解决方案有两个：要么像你发现的那样用 Live Server 或其他本地服务器来跑项目，这样所有资源都在同一个 http/https 协议下；要么调整浏览器设置（不推荐，毕竟这只是开发环境下的临时方案）。

要快速解决就装个插件比如 Live Server，在 VS Code 里启动本地服务，路径改成相对路径就可以正常工作了。代码不用改，就改访问方式：

fetch('data.json')

  .then(res => res.json())

  .then(data => console.log(data));

记得以后开发都要用本地服务器，别直接开 HTML 文件，不然还会遇到更多奇怪的问题。这算是前端开发的一个小坑吧。