问题描述： 一个demo，在html文件中引入<script type="module" src="./index.js"></script>，浏览器中打开demo控制台报错，报错跨域问题。
这显然是 浏览器跨域错误（CORS），在本地通过 <script type="module" src="./index.js"> 引入模块时发生，通常是因为你直接用 file:// 协议打开 HTML 文件，而不是通过本地开发服务器（如 Vite、http-server、VSCode Live Server）访问的。
💥 问题原因：
现代浏览器对使用 type="module" 的 <script> 标签有更严格的安全限制：
- 模块必须从 HTTP(S) 协议加载。
- 不允许从
file://直接加载模块文件，因为会触发浏览器的 跨源访问限制（CORS） 。
✅ 解决方案：
✅ 方法 1：启动本地开发服务器（推荐）
使用本地服务器访问 HTML 文件，而不是直接双击打开：
使用 VSCode Live Server 插件：
- 安装 Live Server 插件。
- 在 HTML 文件上右键选择 “Open with Live Server” 。
- 浏览器会以
http://localhost:xxxx的形式打开页面，就不会报 CORS 错误了。
使用 Node 工具启动服务器（任选其一）：
# 安装 http-server
npm install -g http-server
# 启动服务（例如在当前目录）
http-server .
然后访问：http://localhost:8080/index.html
✅ 方法 2：使用 Vite / Parcel / Webpack 等开发服务器
如果你已经有构建工具：
- 把你的项目接入如 Vite（最快），自动处理模块路径和服务器问题。
- 创建简单的
vite.config.js并用vite启动本地开发环境。
❌ 错误方式（会触发 CORS）：
# 你直接这样打开 HTML 文件是不行的
open index.html
# 或者在浏览器地址栏打开 file:///Users/.../demo/index.html
🧠 补充说明
- 浏览器对
type="module"的模块是 默认开启 CORS 校验 的（跨域加载行为），这是为了防止潜在的跨站脚本攻击。 - 在
file://协议下无法设置响应头（如Access-Control-Allow-Origin），所以会失败。
✅ 小结：
| 操作方式 | 是否支持 ES Modules |
|---|---|
file:// 直接打开 | ❌ 不支持，报错 CORS |
http://localhost:xxxx | ✅ 支持 |
