JavaScript无法直接读取本地file://协议文件，必须通过HTTP服务器运行；推荐用fetch('./data.json')配合Live Server等工具，在http://localhost下加载JSON。
JavaScript 无法直接通过 fetch 或 XMLHttpRequest 读取本地文件系统中的 JSON 文件（比如 file:///path/to/data.json），这是浏览器出于安全限制的同源策略和文件协议限制所致。真正可行的方式是：把 JSON 文件放在 Web 服务器环境下，再用异步请求加载。
必须运行在 HTTP(S) 服务中
浏览器禁止从 file:// 协议发起跨域或本地文件请求（除非用特殊启动参数，但不可用于生产）。所以你需要一个本地开发服务器：
- VS Code 安装插件如「Live Server」一键启动
- 命令行用
npx http-server（需先npm install -g http-server） - 使用 Vite、Webpack Dev Server 等现代构建工具
启动后访问类似 http://localhost:8080，这时 fetch('./data.json') 才能正常工作。
用 fetch 加载 JSON 文件
这是最常用、推荐的方式，返回 Promise，支持 async/await：
立即学习“Java免费学习笔记（深入）”；
async function loadJson() {
try {
const response = await fetch('./data.json');
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const data = await response.json();
console.log(data);
return data;
} catch (err) {
console.error('加载失败:', err);
}
}
注意：fetch 不会因 HTTP 错误状态码（如 404）自动抛错，需手动检查 response.ok 或 response.status。
JSON 文件要放在正确路径下
路径是相对于当前 HTML 页面所在目录的（不是 JS 文件位置）：
- 如果 HTML 在
/index.html，JSON 在/data.json→ 写fetch('data.json') - 如果 JSON 在
/assets/config.json→ 写fetch('assets/config.json') - 确保文件编码为 UTF-8，且 JSON 格式合法（可用 JSONLint 验证）
替代方案：动态 import（仅限模块环境）
如果你的 JSON 文件被当作 ES 模块导入（需构建工具支持或现代浏览器），可这样写：
// 注意：路径必须带 .json 后缀，且服务器要支持 MIME 类型
const data = await import('./data.json').then(m => m.default);
但该方式兼容性较弱（Chrome ≥110，Firefox ≥115），且要求服务器返回 application/json 或正确设置 MIME，不建议作为首选。
不复杂但容易忽略：没有服务器就没有真正的“本地文件读取”，所谓“本地”指的是项目目录里的静态资源，而不是你电脑任意路径下的文件。
