Chrome 限制 file:// 下 HTML5 敏感 API 是因安全上下文要求，仅允许 https:// 或 localhost；解决方法是用本地 HTTP 服务（如 python3 -m http.server），而非手动赋权。
Chrome 默认会限制某些 HTML5 API 的使用，尤其是涉及用户隐私或设备能力的接口（如 navigator.mediaDevices.getUserMedia、geolocation、notifications），**不是“权限没开”，而是这些 API 只能在安全上下文（secure context）中调用**——即必须通过 https:// 或 localhost 访问页面。直接双击打开本地 file:// HTML 文件，哪怕内容完全合法，也会被 Chrome 静默拒绝。
为什么 file:// 下 HTML5 权限总失败？
这是 Chrome 的硬性安全策略，不是 bug，也不支持“手动赋权”绕过。它基于 Secure Contexts 规范，目的是防止恶意本地文件窃取摄像头、麦克风或位置信息。
-
file://协议不被视为安全上下文，所有敏感 API 返回NotAllowedError或直接抛出SecurityError - 即使你在地址栏点“允许”摄像头/定位，Chrome 也不会显示权限提示框——因为根本不会触发请求
- 开发者工具的
Application → Permissions面板对file://页面是灰色不可操作的
真正有效的解决方法：启动本地 HTTP 服务
绕过限制的唯一合规路径，是让页面走 http://localhost:端口（Chrome 认为 localhost 是安全上下文）。不需要装完整服务器，几条命令就能搞定：
- Python 3 用户：
python3 -m http.server 8000
，然后访问http://localhost:8000/your-page.html - Node.js 用户（已装
http-server）：npx http-server -p 8000
- VS Code 用户：安装插件
Live Server，右键 HTML 文件 → “Open with Live Server” - 注意：端口不要用 80 或 443 以外的敏感端口（如 1024 以下），避免权限报错
开发时还要注意的兼容细节
即使跑在 localhost，部分 API 仍有隐性条件：
立即学习“前端免费学习笔记（深入）”；
-
navigator.geolocation.getCurrentPosition在 Chrome 120+ 中，若页面无用户手势（如点击、触摸），可能被延迟或拒绝——需包裹在button.onclick里触发 -
Notification.requestPermission()必须由用户主动触发，不能在页面加载时自动调用，否则返回denied - HTTPS 环境下仍可能被拒绝：如果网站被标记为不安全（例如证书过期、混合内容），Chrome 同样降级为非安全上下文
核心就一条：别试图给 Chrome “开 HTML5 权限”，它根本不提供这个开关。把本地文件扔进一个最小 HTTP 服务里，才是所有现代浏览器都认的解法。容易忽略的是，连 localhost 上的页面，如果用了 document.write 注入脚本或存在 CSP 冲突，也可能间接导致 API 失效——先确保控制台没有其他报错，再排查权限问题。
