为什么 fetch 请求本地 JSON 文件会跨域？ 设计师春萍 提问于 2026-03-11 03:27:18 阅读 16 前端 我在本地开发时用 fetch('data.json') 加载同目录下的 JSON 文件，结果浏览器报 CORS 错误，明明文件就在同一个文件夹里啊？ 我试过直接双击 HTML 文件打开，也试过用 VS Code 的 Live Server 插件，但只有用 Live Server 才能成功。难道本地文件协议（file://）真的不能发 fetch 请求吗？ 我来解答 赞 4 收藏 分享 生成中... 手机扫码查看 复制链接 生成海报 反馈 发表解答 您需要先 登录/注册 才能发表解答 1 条解答 a'ゞ冰杰 Lv1 对，file:// 协议下发 fetch 请求就是会跨域，这不是 bug，是浏览器安全策略的限制。 浏览器会把每个本地文件视为一个独立的“源”，即使是同一个文件夹里的 data.json，对浏览器来说也是不同的源。跨域限制就是为了防止本地文件之间互相读取数据，否则恶意网页就能随便读取你电脑里的文件了。 Live Server 能工作是因为它启动了一个本地 HTTP 服务器（http://localhost:5500），你访问的是 http 协议，和 API 请求同源，所以不存在跨域问题。 解决办法就一个：别用 file:// 协议，用本地服务器。不管是 Live Server、http-server 还是 python -m http.server，只要能跑起来一个本地 HTTP 服务就行。 如果你只是临时调试，还有一个野办法：把 JSON 数据直接 import 进 JS 文件里，用 ES Module 的方式。不过生产环境肯定还是得上正经服务器。 简单说就是：前端开发标配本地服务器，别跟 file:// 较劲。 回复 点赞 2 2026-03-11 04:11 加载更多 相关推荐
浏览器会把每个本地文件视为一个独立的“源”，即使是同一个文件夹里的 data.json，对浏览器来说也是不同的源。跨域限制就是为了防止本地文件之间互相读取数据，否则恶意网页就能随便读取你电脑里的文件了。
Live Server 能工作是因为它启动了一个本地 HTTP 服务器（http://localhost:5500），你访问的是 http 协议，和 API 请求同源，所以不存在跨域问题。
解决办法就一个：别用 file:// 协议，用本地服务器。不管是 Live Server、http-server 还是 python -m http.server，只要能跑起来一个本地 HTTP 服务就行。
如果你只是临时调试，还有一个野办法：把 JSON 数据直接 import 进 JS 文件里，用 ES Module 的方式。不过生产环境肯定还是得上正经服务器。
简单说就是：前端开发标配本地服务器，别跟 file:// 较劲。