本地双击打开html报“404”实为浏览器安全限制，非路径错误；必须用http服务（如npx serve或python3 -m http.server）替代file://协议才能正常加载资源、执行fetch等api。
本地双击打开 HTML 就报 404？这是协议问题，不是文件错了
浏览器用 file:// 协议直接打开 HTML 文件时，压根没有 HTTP 状态码的概念，所谓“404”错误其实是浏览器控制台伪造的提示（尤其在 iframe、fetch()、CSS @import 或图片 src 加载失败时）。它真实意思是“当前安全上下文拒绝加载该资源”，根源是现代浏览器对本地文件系统的严格限制。
常见表现包括：
-
iframe src="subpage.html"显示空白 + 控制台标红 “404” -
fetch("./data.json")拒绝执行，报Failed to fetch而非网络错误 - CSS 中
@import "theme.css"不生效，Network 面板显示 “(blocked)”
这不是路径写错了，也不是文件丢了——是浏览器主动拦住了。解决办法只有一个：不用 file://，改用真正的 HTTP 服务。
用 npx serve 或 python3 -m http.server 启一个最小服务
这两条命令能立刻把当前目录变成可访问的 Web 根目录，所有相对路径按标准 HTTP 规则解析，fetch、iframe、静态资源全都能正常加载。
实操建议：
- 终端进入 HTML 所在文件夹，运行
npx serve（需已安装 Node.js），然后访问http://localhost:5000/your-page.html - 没装 Node？用 Python：
python3 -m http.server 8000，然后访问http://localhost:8000/your-page.html - 确保所有资源路径都是相对路径（如
img/logo.png、../css/main.css），不要用file:///或绝对磁盘路径 - 如果页面里有 JS 调用
fetch("./api/data.json")，记得把data.json放在同一目录或对应子路径下，HTTP 服务才能路由到它
PyCharm / VS Code 插件预览也得走 HTTP
PyCharm 点击右上角浏览器图标、VS Code 的 Live Server 插件，本质都是自动启了一个本地 HTTP 服务。但很多人误以为“点开能看 = 一切正常”，结果一用 requests.get("http://localhost:63342/xxx.html") 就 404——因为 PyCharm 默认只对同源请求放行，且端口（如 63342）是 IDE 内部代理端口，不对外暴露。
正确做法：
- 关闭 PyCharm 自带预览，改用上面提到的
npx serve或python3 -m http.server - VS Code 安装 Live Server 插件后，右键 HTML 文件 → “Open with Live Server”，它会起
http://127.0.0.1:5500/这类真实端口，requests可直连 - 确认 Python 测试脚本里请求的是
http://127.0.0.1:5500/xxx.html，而不是http://localhost:63342/或file://路径
别信“改路径就能绕过 file:// 限制”
有人试过把 iframe src 改成完整文件路径，比如 src="file:///C:/project/subpage.html"，这在部分旧版 Chrome 可能偶然生效，但：
- Chrome 120+、Edge、Firefox 已全面禁用跨
file://加载，会直接报Not allowed to load local resource - 路径含空格、中文或特殊字符（如
öppettider.jpg）时，file://URL 编码极易出错，HTTP 服务反而更稳定 - 即使侥幸加载成功，
fetch、localStorage、WebGL等 API 仍不可用——它们依赖完整的 origin，而file://没 origin
真正可靠的本地开发流，就是始终跑在 http://localhost 下。别省那一条命令，否则后面所有 JS 功能、测试脚本、自动化流程都会卡在这一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
