谷歌浏览器无法正确解析本地开发的JSON数据文件？

先说结论：在本地开发时，你在 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:// 开头的页面发起 fetch 或 XMLHttpRequest 请求。即使目标文件就在同一文件夹中，浏览器也会直接切断连接，不发送请求、不返回数据，甚至不触发 onerror 回调，只在 Console 里输出一条模糊的 net::ERR_FILE_NOT_FOUND 错误。相比之下，Firefox 和 Edge 对这个限制要宽松得多——Firefox 允许本地 AJAX，Edge 从 110 版本起也放开了限制——唯独 Chrome 坚持最严策略。

根本原因：Chrome 主动拦截 file:// 协议下的 AJAX 请求

Chrome 基于安全考虑，默认禁止所有以 file:// 开头的页面发起 XMLHttpRequest 或 fetch 请求——哪怕目标文件就在同一文件夹里。浏览器会直接中断连接，不发送请求、不返回数据，也不触发 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 服务（推荐）

① 打开终端，进入项目根目录（包含 index.html 和 data.json 的文件夹）

② 执行 npm install -g http-server 安装命令行工具（如已安装可跳过）

③ 运行 http-server -p 8080 启动服务，端口可自选

④ 浏览器访问 http://localhost:8080，此时所有 AJAX 请求将正常发出并收到响应

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

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

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

chrome.exe --user-data-dir=/tmp/chrome-dev --unsafely-treat-insecure-origin-as-secure="file://" --user-data-dir=/tmp/chrome-dev --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 读取，无需额外配置。