这是浏览器对file://协议的cors安全拦截，因origin为null导致es模块加载失败；唯一稳定解法是改用http服务，如vs code的live server插件、npx http-server或vite开发服务器。
直接用 file:// 协议打开含 <script type="module"></script> 的 HTML 文件，浏览器会报 “Access to script at 'file:///' from origin 'null' has been blocked” 错误。这不是代码写错了，而是浏览器主动拦截——file:// 没有合法的 origin，模块加载默认走 CORS 流程，而 CORS 要求 origin 可识别（如 http://localhost:5173）。唯一稳定、通用、无需改代码的解法，就是把本地文件换成 HTTP 服务访问。
用 Live Server 插件快速启动（推荐新手）
VS Code 用户装好 Live Server 插件后，右键 HTML 文件 → “Open with Live Server”，它会自动：
- 启动一个轻量 HTTP 服务器（默认端口 5500）
- 用 http://127.0.0.1:5500/xxx.html 打开页面
- 所有 import、export、静态资源路径都按相对位置正常解析
- 支持热重载，改完保存即刷新，不用手动刷新页面
用 npx 临时起服务（无需全局安装）
终端进入项目根目录，执行任意一条即可，都不用提前装依赖：
- npx http-server -c-1（推荐，支持 CORS，-c-1 禁用缓存）
- npx serve -s（来自 serve 包，简洁易用）
- npx anywhere（极简风格，端口 8000，适合纯静态页）
所有命令都会输出可点击的本地地址，复制进浏览器即可，关掉终端就停止服务，零配置。
用 Vite 开发服务器（适合现代前端项目）
如果你的项目已用 Vite 构建或打算长期维护：
- 确保项目有 vite.config.js 或 vite.config.ts
- 运行 npx vite（开发模式），默认地址是 http://localhost:5173
- 它原生支持 ES 模块、HMR、环境变量，且对 import 路径做了自动解析和代理优化
- 若需打包后也支持本地双击打开，可加插件 @vitejs/plugin-legacy 生成兼容脚本备用
为什么不用 --allow-file-access-from-files 参数？
该 Chrome 启动参数在新版浏览器中已被废弃或失效：
- Edge/Chrome 94+ 已彻底移除对该参数的支持
- 即使旧版本生效，也需要每次手动带参启动浏览器，无法用于调试 iframe、Service Worker 等场景
- 它绕过的是部分限制，但不解决 origin === 'null' 导致的模块加载失败本质问题
- 属于临时 hack，不符合开发规范，也不被 CI/CD 或团队协作接受
