直接双击打开本地HTML文件时资源加载失败是因file://协议受浏览器安全策略限制，解决方法是启动本地HTTP服务，如Python的python3 -m http.server 8000，使相对路径按标准HTTP规则正常解析。
直接双击打开本地 HTML 文件时，用相对路径引用的 js、css、img 等资源加载失败，浏览器控制台报 net::ERR_FILE_NOT_FOUND 或 CORS 错误——这不是代码写错了，而是浏览器的安全策略限制了 file:// 协议下的相对路径解析和跨源读取。
为什么 file:// 下相对路径会失效
浏览器在 file:// 协议下解析相对路径时，会以当前 HTML 文件所在目录为根（base URL），但部分浏览器（尤其是 Chrome）对 file:// 的静态资源加载施加了额外限制：
- 不支持从
file://加载fetch()或XMLHttpRequest请求的本地文件（触发 CORS 阻断） - 某些版本 Chrome 会拒绝加载非同目录层级的相对路径（比如
../assets/script.js在子目录中被误判为越界） -
file://下没有服务器上下文，base href和import.meta.url行为可能不一致
最稳妥的解决方式：启动一个本地 HTTP 服务
绕过 file:// 限制的唯一通用方案是让页面运行在 http:// 协议下。无需安装复杂工具，几条命令就能起服务：
- Python 3（推荐）：
python3 -m http.server 8000
—— 启动后访问http://localhost:8000/your-page.html - Node.js（如有
npx）：npx serve -s
或npx http-server -c-1
（-c-1禁用缓存，便于调试） - VS Code 用户：装
Live Server插件，右键 HTML 文件 → “Open with Live Server”
此时所有相对路径（如 ./style.css、../js/main.js、images/logo.png）都会按标准 HTTP 规则解析，完全正常。
立即学习“前端免费学习笔记（深入）”；
<base href> 不要乱加，尤其在 file:// 场景下
有人试图用 <base href="./"> 或 <base href="file:///path/to/dir/"> 强制修正路径，但这反而容易出问题：
-
<base href>对file://的绝对路径支持极差，Chrome 会忽略或报错 - 一旦写死路径，文件挪动位置就全崩，失去相对路径的本意
- 它会影响所有相对 URL（包括
a[href]、form[action]），副作用难控 - 真正需要
<base>的场景是部署到子路径（如https://site.com/app/），不是本地开发
临时调试技巧（仅限简单查看，不用于功能验证）
如果只是快速看个样式、图片是否放对了，且确认没用 JS 动态请求资源，可尝试：
- 换用 Firefox 双击打开：对
file://相对路径更宽容，img和link基本能加载 - Chrome 启动时加参数（不推荐长期用）：
chrome --allow-file-access-from-files
（新版已逐步废弃，且存在安全风险） - 把所有资源内联（
<style>、<script>、Base64 图片）——只适合极小 demo，不可扩展
这些方法掩盖了真实环境的问题，只要页面涉及 AJAX、ES 模块导入、Service Worker 或任何现代前端流程，就必须走本地 HTTP 服务。
