浏览器直接打开本地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 是最稳的路。