先说结论：你本地开发时用 Chrome 直接双击打开 HTML，再通过 fetch 或 jQuery.getJSON 加载同目录下的 data.json，结果控制台报错 Failed to load resource: net::ERR_FILE_NOT_FOUND 或 Unexpected token < in JSON at position 0。

别急着检查 JSON 格式。问题根本不在数据上，而是 Chrome 压根没让你的代码发出请求。

背后逻辑：Chrome 安全策略拦截 file:// 请求

Chrome 出于安全策略，禁止所有以 file:// 开头的页面发起 fetch 或 XMLHttpRequest 请求。哪怕目标文件就躺在同一文件夹里，浏览器也会直接切断连接。

它不发请求、不返回数据，甚至不触发 onerror 回调，只在 Console 里丢一条模糊的 net::ERR_FILE_NOT_FOUND 错误。

Firefox 和 Edge 对此宽松得多：

• Firefox 允许本地 AJAX。
• Edge 从 110 版本起也放开了限制。
• 唯独 Chrome 坚持最严策略。

验证方法：判断是否为跨域拦截

打开开发者工具 → Console 标签页，执行以下代码：

fetch('./data.json').then(r => r.text()).catch(e => console.error(e))

• 如果报错信息含 net::ERR_FILE_NOT_FOUND 或 Failed to fetch，且无 Network 请求记录，说明被浏览器拦截。
• 如果出现 Unexpected token <，则是服务器返回了 HTML（如 404 页面），属于路径错误或服务未启动。

三种可立即生效的解决方法

方法一：用 http-server 快速起一个本地 HTTP 服务（推荐）

1. 打开终端，进入你的项目根目录（包含 index.html 和 data.json 的文件夹）。
2. 执行 npm install -g http-server 安装命令行工具（如已安装则跳过）。
3. 运行 http-server -p 8080 启动服务，端口可自选。
4. 浏览器访问 http://localhost:8080，此时所有 AJAX 请求将正常发出并收到响应。

注意：不要关闭终端窗口，关闭即服务停止。刷新页面时地址栏必须是 http:// 开头，不能是 file://。

方法二：使用 Chrome 启动参数临时绕过（仅限开发调试）

关闭所有 Chrome 窗口 → 在命令行中输入以下完整命令启动：

chrome.exe --user-data-dir=/tmp/chrome-dev --unsafely-treat-insecure-origin-as-secure="file://" --allow-file-access-from-files

Windows 用户需将 chrome.exe 替换为 Chrome 实际安装路径，例如："C:Program FilesGoogleChromeApplicationchrome.exe"。

【警告】此方式禁用关键安全机制，切勿用于日常上网或打开不可信网页。

方法三：改用 Live Server 插件（VS Code 用户专属）

在 VS Code 中右键点击 index.html → 选择“Open with Live Server” → 自动在 http://127.0.0.1:5500 打开页面。

该插件内置轻量 HTTP 服务，支持热重载，且默认允许同域 JSON 读取，无需额外配置。

--- **说明**：图片位置、说明文字均未改变（原文无图片说明文字，故不增加）。所有数据、政策、机构名称、专业术语（如 net::ERR_FILE_NOT_FOUND、file://、fetch 等）保持原样。结论立场未变。