双击打开index.html是本地文件而非网站，因使用file://协议导致fetch、service worker等功能失效；应通过http服务（如live server、python3 -m http.server）运行，并确保资源路径为相对路径。
直接双击打开的 index.html 不是“网站”，只是本地文件系统浏览
浏览器地址栏显示 file:/// 开头，说明它没走 HTTP 协议，所有依赖网络协议的功能都会失效：比如 fetch 跨域限制会变成更严格的同源策略（连本地不同文件夹都算跨源）、Service Worker 无法注册、localStorage 在某些浏览器中受限、相对路径的 import 或模块加载可能失败。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 开发时别双击打开 —— 用轻量 HTTP 服务启动，比如 VS Code 安装
Live Server插件后右键菜单点Open with Live Server - 命令行快速起服务：
npx serve（需先npm install -g serve），或 Python 用户用python3 -m http.server 8000 - 确保 HTML 中资源路径是相对路径（如
./script.js），避免硬写file://或绝对路径
fetch 请求本地 JSON 报错 net::ERR_FAILED 怎么办
这是 file:// 协议下最典型的症状，不是代码写错了，是浏览器根本不允许这种请求。HTTP 协议才支持 fetch，而本地文件协议没有服务器响应机制。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把数据放成内联 JSON：用
<script type="application/json">{...}</script>，再用 JS 读取document.querySelector('script[type="application/json"]').textContent - 改用
XMLHttpRequest同样无效 —— 所有基于网络栈的 API 都受制于协议，不是换函数就能绕过 - 真要动态加载，必须走 HTTP：把文件放进
serve或Live Server启动的根目录下，用fetch('./data.json')（注意路径在服务上下文里解析）
想边改边看效果，但又不想装完整开发环境
不需要 Node.js、Webpack 或 VS Code —— 最小闭环只要一个终端和一个浏览器。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- Mac / Linux 终端进 HTML 所在目录，运行：
python3 -m http.server 5500，然后浏览器打开http://localhost:5500/index.html - Windows 用户若没装 Python，可下载免安装的
miniserve（单个二进制），运行：miniserve . --port 5500 - 编辑保存后，浏览器按
Cmd+R/Ctrl+R刷新即可，无需额外配置热更新 - 注意：不要用
http://127.0.0.1:5500替代localhost—— 某些浏览器对这两个 host 的安全策略略有差异
为什么改了 HTML 却看不到变化？缓存不是主因
90% 是路径问题：浏览器请求的资源 404 了，但控制台静默失败，页面只缺一块内容，你却在查 JS 逻辑。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 打开浏览器开发者工具（F12），切到
Network标签页，刷新页面，看有没有红色的 404 请求 —— 特别关注script.js、style.css、图片或data.json - 检查 HTML 中
src和href的路径：当前 HTML 在/project/index.html，引用js/main.js，实际路径应是/project/js/main.js，不是/js/main.js - VS Code 的
Live Server默认以工作区根为服务根目录；而python -m http.server以当前终端所在目录为根 —— 二者行为不一致，容易误判路径
真正麻烦的从来不是怎么开服务，而是路径写错后，浏览器既不报错也不提示，只默默丢掉请求。
