Chrome v89+ 默认拦截 file:// 下的 fetch 等操作，因该协议无同源策略易致安全风险；而 Live Server 等通过 http://localhost 提供标准 Web 安全模型支持。
Chrome 打开本地 HTML 文件提示“此文件可能不安全”
Chrome 从 v89 开始默认拦截 file:// 协议下加载的某些资源（比如 fetch()、XMLHttpRequest、importScripts()），尤其当 HTML 文件里含 JavaScript 尝试读取本地其他文件或发起跨目录请求时，控制台会报 net::ERR_BLOCKED_BY_CLIENT 或 Not allowed to load local resource。这不是“病毒警告”，而是浏览器主动限制——因为 file:// 没有同源策略边界，容易被恶意 HTML 文件读取你电脑上的任意文件。
为什么双击打开 HTML 总是失败，但用 VS Code Live Server 就行？
VS Code 的 Live Server 插件启动的是一个本地 HTTP 服务（如 http://127.0.0.1:5500/index.html），此时页面运行在 http:// 协议下，浏览器按标准同源策略执行，允许 fetch('./data.json')、import('./module.js') 等操作。而双击打开是 file:///Users/xxx/index.html，协议不同，权限模型完全不同。
-
file://：无服务器、无 CORS、无 cookie、JS 可尝试访问同目录任意文件（危险面）→ 浏览器强制收紧 -
http://localhost：有明确 origin、受完整 Web 安全模型约束 → 允许现代前端开发行为
临时绕过（仅限可信本地开发，不推荐长期用）
如果你只是想快速验证一个单页 HTML，又不想装服务，可启动 Chrome 时加参数禁用该限制（仅限本机调试，每次都要重开）：
chrome --unsafely-treat-insecure-origin-as-secure="file://" --user-data-dir=/tmp/chrome-test-dir
注意：
立即学习“前端免费学习笔记（深入）”；
- 路径
/tmp/chrome-test-dir必须是空目录，不能复用已有 profile - Windows 用户请用绝对路径，例如
--user-data-dir=C:\temp\chrome-test - 该方式禁用的是整个
file://的安全沙箱，一旦打开恶意 HTML 文件，风险极高 - Edge / Firefox 不支持类似参数，且行为更严格
真正可靠的方案：用最小 HTTP 服务代替双击
不需要安装复杂工具。以下任选其一即可：
- Python 3 自带：
python3 -m http.server 8000，然后访问http://localhost:8000/your-file.html - Node.js（如有）：
npx serve -s . -l 3000（需先npm install -g serve） - VS Code：右键 HTML 文件 → “Open with Live Server”（自动监听并刷新）
- 浏览器插件：如 Chrome 的
Web Server for Chrome（已下架，慎用旧版）
所有这些方式都让页面跑在 http:// 下，完全兼容现代前端写法，且无需改代码、不降低安全性。
真正容易被忽略的是：很多教程写 fetch('data.json') 时没说明协议上下文，导致新手在 file:// 下死磕权限错误。只要记住——本地开发 ≠ 双击打开，它本质是本地服务调试，协议切换才是关键。
