如何规避谷歌浏览器对本地file://协议下AJAX请求的限制？

应启用本地 HTTP 服务，如执行 python3 -m http.server 8000 后访问 http://localhost:8000；或使用 Chrome 的 --allow-file-access-from-files 参数（新版已废弃）；或用 import data from './data.json' assert { type: 'json' } 静态导入。

当你双击打开一个本地 HTML 文件，在 JavaScript 中用 fetch 或 jQuery.ajax 读取同目录下的 data.json 时，Chrome 控制台立刻报错“Cross origin requests are only supported for protocol schemes: http, data, chrome...”，页面白屏或数据不渲染——这不是代码写错了，而是浏览器在 file:// 协议下直接掐断了所有 AJAX 请求的发起机会。

启用本地 HTTP 服务（推荐）

这是唯一被现代前端工作流广泛采纳、无副作用、且与生产环境行为一致的解法。file 协议没有 origin，浏览器干脆禁止 XMLHttpRequest 和 fetch；而 localhost 有明确 origin，AJAX 行为完全正常。

第一步：打开终端，进入你的项目根目录（即包含 index.html 和 data.json 的文件夹）

第二步：执行 python3 -m http.server 8000（macOS/Linux）或 npx serve -s -p 8000（需已安装 Node.js）

第三步：在浏览器中访问 http://localhost:8000，而非双击打开文件。此时所有 fetch('./data.json') 都能成功返回数据，控制台不再报错。

注意：如果端口 8000 被占用，可改用 8080、3000 等任意空闲端口，但 URL 必须保持 http:// 协议前缀。

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

适用于快速验证逻辑、无网络环境、或调试老旧 demo，但仅限开发阶段使用，不可用于交付或协作场景。

方法一：修改 Windows 快捷方式目标

右键 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），且不需要运行时动态拼接路径，这个方法最干净。

在你的主 JS 文件顶部写：import data from './config.json' assert { type: 'json' };

这行代码会在模块加载阶段由浏览器解析并注入 data 对象，不走 fetch，不触发跨域检查，也不依赖任何服务。

注意：必须确保 HTML 中 script 标签带有 type="module" 属性，否则语法报错。