先说我的核心判断：这个问题几乎每个前端开发者都会撞上一次。撞上的第一反应，往往是怀疑代码写错了。其实代码没问题。

问题出在浏览器对本地文件的安全策略上。

你双加打开一个本地 HTML 文件，然后在 Ja vaScript 里用 fetch 或者 jQuery.ajax 去读取同目录下的 data.json。结果 Chrome 控制台立刻给你甩一句“Cross origin requests are only supported for protocol schemes: http, data, chrome...”。页面白屏，数据渲染不出来。

这时候别急着检查 URL 是不是写错了——浏览器在 file:// 协议下，直接对 XMLHttpRequest 和 fetch 说“不”。

那么，怎么绕过这个限制？有三种比较常见的解法。其中一种是最推荐的，另外两种各有适用场景，但也都有明显的坑。

启用本地 HTTP 服务（推荐）

这是现代前端开发里最通用的做法。没有副作用，而且行为和生产环境完全一致。file 协议下没有 origin，浏览器也就没有理由放行 AJAX 请求。而 localhost 有明确的 origin，一切就都正常了。

操作非常简单。打开终端进入项目根目录——就是包含 index.html 和 data.json 的那个文件夹。然后执行 python3 -m http.server 8000（macOS 或 Linux）。或者如果你装了 Node.js，也可以用 npx serve -s -p 8000。

之后在浏览器访问 http://localhost:8000，而不是双击文件。这时候再跑 fetch('./data.json')，数据就能正常返回，控制台干干净净。

需要注意：如果 8000 端口被占用，可以换成 8080、3000 之类的空闲端口。但 URL 必须保持 http:// 前缀。

添加 Chrome 启动参数（临时可用）

这个方法适合快速验证逻辑、在无网络环境下调试，或者对付一些老旧 demo。但它只适合开发阶段，不能用于交付或者协作。

具体的操作有两种：

• 修改 Chrome 快捷方式的属性：右键快捷方式 → 属性，在“目标”末尾加上一个空格，然后粘贴 --allow-file-access-from-files。
• 通过命令行启动：Mac、Linux、Windows 都支持。输入完整路径加参数即可，比如 "C:Program FilesGoogleChromeApplicationchrome.exe" --allow-file-access-from-files。

不过必须提醒的是：这个参数在 Chrome 125 及之后的版本里已经被逐步废弃了。部分新版安装包启动后会自动忽略这个参数，而且开启后整个浏览器的沙箱强度会降低。

改用 ES Module 静态导入（仅限 JSON）

如果你的需求很简单——加载结构固定、路径确定的配置类 JSON 文件，比如 config.json 或 theme.json，而且不需要在运行时动态拼接路径——那么这个方法是最干净的。

在 Ja vaScript 文件顶部写一行：import data from './config.json' assert { type: 'json' };。这行代码会在模块加载阶段由浏览器解析并注入 data 对象。不走 fetch，不触发跨域检查，也不依赖任何服务。

注意：HTML 里的 script 标签必须带上 type="module" 属性，否则语法会报错。

说到底，这三种方法里，本地 HTTP 服务是唯一值得长期依赖的方案。其他两种可以应急，但要么有兼容性风险，要么适用场景太窄。如果你还在为这个报错卡住，不妨就从第一种开始试起。

《夸克》非常好用的免费AI浏览器

下载APP查看