能，但有严重限制：本地双击以file://协议运行会禁用跨域请求、fetch读取本地文件、Service Worker等，仅适合纯静态展示；可靠解法是通过HTTP服务器（如Python的http.server或VS Code Live Server）以http://localhost访问。
直接双击 HTML 文件能运行吗
能，但有严重限制：本地双击打开的 file:// 协议下，浏览器会禁用跨域请求、fetch 读取本地文件、Service Worker、部分 localStorage 行为，甚至某些 CSS 模块或 ES 模块 import 会直接报错 net::ERR_FAILED。
常见现象：fetch('./data.json') 失败、控制台出现 Blocked loading resource from url not allowed by CORS policy（虽然没发请求，但协议层就拦截了）。
- 适合场景：纯静态展示，无 JS 交互、无外部资源加载
- 不适合场景：调用 API、读取本地 JSON/CSV、使用 Vite/React/Vue 开发时的热更新
- 验证方法：打开开发者工具 → Console 标签页，看是否有
Origin null is not allowed或Failed to load resource
用 Python 快速起一个本地 HTTP 服务
只需一行命令，绕过 file:// 限制，让浏览器以 http://localhost:8000 访问，所有 Web API 正常工作。
终端进入 HTML 所在目录后执行：
立即学习“前端免费学习笔记（深入）”；
python3 -m http.server 8000
Windows 用户若默认是 Python 2，改用：
py -3 -m http.server 8000
- 端口可换，比如
8080，但需确保未被占用 - 该服务不支持 HTTPS，开发阶段够用；上线必须用 Nginx / Apache / Vercel 等正式服务器
- 注意：它不会自动刷新页面，改了 HTML 后需手动刷新浏览器
VS Code 里点「Live Server」插件为什么更方便
它不只是起个服务器，还集成了实时重载（auto-reload）和基础代理能力，省去手动刷新和配置反向代理的麻烦。
- 安装插件后，右键 HTML 文件 →
Open with Live Server - 默认启动
http://127.0.0.1:5500/xxx.html，支持 ES 模块、fetch、WebSocket - 改保存文件后，浏览器自动刷新（可关，但默认开）
- 遇到跨域调试后端接口？在插件设置里加
"liveServer.settings.proxy": { "enable": true, "proxyUrl": "http://localhost:3000" }
Chrome 扩展或命令行强制允许本地文件访问？
不推荐。像 --unsafely-treat-insecure-origin-as-secure="file://" 这类启动参数，或安装「Allow CORS」扩展，只能临时绕过限制，且新版 Chrome 越来越严格，经常失效。
本质问题没解决：浏览器把 file:// 当作不安全上下文，很多 API 明确要求 https:// 或 http://localhost 才启用。
-
navigator.geolocation在file://下直接返回拒绝 -
document.cookie、localStorage在部分 Chrome 版本中对file://完全不可写 - 真正可靠的解法只有一个：走 HTTP 协议，哪怕只是本地
localhost
project/src/pages/index.html），然后用 Live Server 打开却没注意当前工作目录——结果加载的 ./script.js 路径 404。路径问题永远比协议问题更早绊倒人。 
