直接双击打开 index.html 无法读取本地 JSON 文件，因为浏览器出于安全限制禁止 file:// 协议下的 fetch 请求；唯一可靠解决方法是启动本地 HTTP 服务（如 http-server 或 Python 内置服务器），通过 http://localhost 访问。
为什么直接双击打开 index.html 会读不到本地 JSON 文件
浏览器出于安全限制，对 file:// 协议下的 AJAX 请求（比如 fetch('./data.json')）默认拦截——这不是 bug，是故意的。此时控制台会报类似 Access to fetch at 'file:///xxx/data.json' from origin 'null' has been blocked by CORS policy 的错误，但注意：这其实不是标准 CORS 问题（因为没 origin），而是浏览器拒绝了跨源读取本地文件。
- Chrome、Edge、Firefox 在
file://下一律禁用fetch和XMLHttpRequest加载同目录 JSON - 哪怕 JSON 和 HTML 在同一文件夹，路径完全正确，也会失败
- 把 JSON 改成
.js并用<script></script>引入可行，但失去动态加载能力，且需手动包装成变量
最简单有效的解决办法：起一个本地 HTTP 服务
绕过 file:// 限制的唯一可靠方式，是让页面通过 http://localhost:xxxx 访问。不需要装完整后端，几条命令就能搞定。
- 有 Node.js？运行
npx http-server（需先npm install -g http-server），然后访问http://localhost:8080 - Python 3？用
python3 -m http.server 8000，访问http://localhost:8000 - Python 2？用
python -m SimpleHTTPServer 8000 - VS Code 用户可装插件 Live Server，右键
index.html→ “Open with Live Server”
此时 fetch('./data.json') 就能正常工作，路径解析和网络行为完全符合预期。
开发阶段别碰 --disable-web-security
网上常有人建议加启动参数关闭安全策略，例如：chrome.exe --disable-web-security --user-data-dir=/tmp。这看似“解决问题”，实则埋雷：
- 该参数会全局禁用所有安全机制（不只是 CORS），极大增加 XSS 和恶意脚本风险
- 不同 Chrome 版本对参数支持不一致，新版可能直接忽略或报错
- 无法模拟真实部署环境（线上永远是 HTTP(S)，不是
file://） - 团队协作时，别人没法复现你的“修复”
JSON 文件本身也要检查的细节
即使上了本地服务，仍可能因 JSON 格式或编码问题导致解析失败，常见表现是 Unexpected token 或空响应。
- 确保 JSON 文件以 UTF-8 无 BOM 编码保存（用 VS Code、Notepad++ 等编辑器确认）
- 末尾不能有多余逗号（
{ "name": "a", }是非法的） - 字符串必须用双引号，单引号会报错
- 如果 JSON 路径含中文或空格，URL 编码后才能被正确识别（如
数据.json→%E6%95%B0%E6%8D%AE.json）
真正卡住人的往往不是 CORS 这个词，而是误以为“本地文件=天然可读”，结果在路径、编码、协议三者之间反复横跳。起个本地服务，5 秒解决；纠结禁用安全策略，三天都未必理清副作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
