浏览器直接打开本地HTML文件使用file://协议，但因CORS和安全策略限制，XMLHttpRequest、fetch等常失败；推荐用Python或Node.js启动本地HTTP服务（如python3 -m http.server 8000），以http://localhost访问来规避限制。
浏览器直接打开本地 HTML 文件，本质是用 file:// 协议加载本地路径，但不同浏览器对本地文件的限制越来越严——尤其是涉及 XMLHttpRequest、fetch、iframe 加载同目录资源，或读取子目录文件时，会因 CORS 或安全策略报错。
用双击或右键“在浏览器中打开”最简单，但有兼容性陷阱
Windows/macOS 下双击 .html 文件，系统通常调用默认浏览器以 file:// 方式打开。看似方便，但要注意：
- Chrome 从 v80 起默认禁用
file://下的跨文件 AJAX（比如fetch('./data.json')会直接被拒绝，控制台报Failed to load resource: net::ERR_FAILED） - Firefox 相对宽松，但若 HTML 引用了同目录的
.js文件，而该 JS 又尝试读取另一个本地文件，依然可能被拦截 - Edge 和 Safari 行为类似 Chrome，尤其对
file://+fetch组合非常敏感
命令行启动浏览器并禁用安全限制（仅限开发调试）
临时绕过限制，适合本地快速验证页面逻辑，但绝不能用于日常浏览或处理敏感数据：
- Chrome：终端执行
chrome --disable-web-security --user-data-dir=/tmp/chrome-dev
（macOS/Linux）或chrome.exe --disable-web-security --user-data-dir="C:\chrome-dev"
（Windows） - 注意：
--user-data-dir必须是空目录，否则启动失败；关闭所有 Chrome 窗口后再运行，否则参数不生效 - 启动后手动拖入 HTML 文件，或在地址栏输入完整路径如
file:///Users/you/project/index.html
用 Python 或 Node.js 启一个本地 HTTP 服务（推荐方案）
真正解决“本地 HTML 访问本地资源”的问题，核心是让页面走 http://localhost:xxxx 而非 file://，从而规避浏览器对本地协议的封锁：
立即学习“前端免费学习笔记（深入）”；
- Python 3 内置 HTTP 服务（当前目录即根目录）：
python3 -m http.server 8000
，然后访问http://localhost:8000/index.html - Node.js（需先装
http-server）：npx http-server -p 8000
，同样访问http://localhost:8000/ - 关键点：此时所有相对路径（如
./script.js、../assets/img.png）都能正常加载，fetch('./api/mock.json')也不会被拦
路径写法必须区分 file:// 和 http:// 场景
同一个 HTML 文件，在双击打开和本地服务器打开时，“找资源”的规则完全不同：
-
file://下：./data.json指的是与 HTML 文件同级的data.json；但../images/icon.png若 HTML 在子目录，可能因浏览器路径解析差异出错 -
http://localhost:8000/下：所有相对路径基于服务器根目录（即你执行命令时所在的目录），不是 HTML 所在目录。例如 HTML 在/pages/index.html，引用./style.css实际请求的是http://localhost:8000/style.css，不是/pages/style.css - 解决方案：统一用以
/开头的绝对路径（如/css/main.css），或确保项目结构扁平，HTML 放在根目录下
真正的难点不在“怎么打开”，而在“打开之后能不能正常加载其他本地资源”。file:// 是伪协议，浏览器对其限制逐年收紧；只要涉及任何动态加载、AJAX、模块导入，就必须切到本地 HTTP 服务。别省那几秒，起个 http.server 是最稳的路。
