es modules跨域加载必须配置script的crossorigin属性及服务端响应头，否则静默失败；file://协议下所有模块加载均被拒绝，须启用本地http服务器。
ES Modules 加载跨域脚本时，浏览器强制使用 CORS 协议校验，不是“能不能发请求”，而是“响应回来后浏览器认不认”。关键不在前端写法，而在服务端响应头和 script 标签的配置是否匹配。
必须设置 crossorigin 属性
加载外部域名的模块脚本（如 CDN 上的 lodash-es、three.js），必须显式添加 crossorigin 属性，否则浏览器会拒绝解析模块，即使资源已成功下载：
-
<script type="module" src="https://cdn.example.com/utils.js"></script>→ ❌ 静默失败，控制台报 CORS 错误 -
<script type="module" src="https://cdn.example.com/utils.js" crossorigin></script>→ ✅ 允许跨域请求，浏览器检查响应头 - 若 CDN 要求凭证（如 cookies），需用
crossorigin="use-credentials"，且服务端必须返回Access-Control-Allow-Credentials: true
服务端响应头不能缺失
浏览器收到响应后，会检查以下至少两个关键响应头：
-
Content-Type: application/javascript—— 必须准确，不能是text/plain或text/javascript -
Access-Control-Allow-Origin: *或具体源（如https://your-site.com）—— 若用通配符*，则不可同时设Access-Control-Allow-Credentials: true
缺少任一字段，模块加载就会中断，控制台显示“Failed to load module script”或“CORS policy blocked”。
预加载跨域模块要同步配置
如果用 <link rel="modulepreload"> 提前拉取跨域模块，href 必须与后续 <script type="module" src></script> 的 src 完全一致（含查询参数），且同样必须带 crossorigin 属性：
<link rel="modulepreload" href="https://cdn.example.com/main.js" crossorigin><script type="module" src="https://cdn.example.com/main.js" crossorigin></script>
二者缺一或属性不一致，预加载将静默失效，模块仍会走完整网络流程。
file:// 协议下无法绕过 CORS
双击打开 HTML 文件（即使用 file:// 协议）时，浏览器视其 origin 为 null，所有模块加载（包括同目录下的 ./a.js）都会被拒绝，控制台可能只显示空 CORS 错误或不发起请求。这不是代码问题，而是浏览器安全策略。
- 唯一可靠解法：启动本地 HTTP 服务器（如
npx serve、python3 -m http.server或 VS Code Live Server） - 开发阶段切勿依赖双击打开 HTML 测试 ESM 跨域行为
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
