部署到AWS后，如何允许CORS并导入CDN提供的ES6模块？

问题背景 #

本地用importmap+ES模块import()加载CDN资源正常，部署到AWS后触发CORS错误；改用普通<script>标签引入能正常加载，但ES模块中无法直接访问全局的Highcharts对象。

核心原因 #

• ES模块的import()/静态导入会触发浏览器的CORS预检机制，要求CDN服务器返回Access-Control-Allow-Origin等合法CORS响应头，否则请求被拦截。
• 普通<script>标签加载资源属于“经典脚本”，浏览器不做CORS校验，因此不会报错；但ES模块拥有独立作用域，无法直接访问全局对象，需通过window显式引用。

可行解决方案 #

1. 动态创建script标签加载，模块中通过window访问全局对象 #

这种方式既规避CORS校验，又能控制加载顺序，在模块中正常使用库：

// main.js
function loadScript(src) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = src;
    script.onload = () => resolve();
    script.onerror = reject;
    document.head.appendChild(script);
  });
}

Promise.all([
  loadScript("https://code.highcharts.com/10.3.3/highcharts.js"),
  loadScript("some other CDN")
]).then(() => {
  // 通过window访问全局对象
  const highcharts = window.Highcharts;
  // 执行后续业务代码
  highcharts.chart('container', { /* 配置项 */ });
});

2. 更换支持CORS的CDN源 #

部分公共CDN默认配置了正确的CORS响应头，可替换原CDN地址后继续使用importmap方案：

<!-- index.html -->
<script type="importmap">
  {
    "imports": {
      "Highcharts": "https://cdn.jsdelivr.net/npm/highcharts@10.3.3/highcharts.js",
      "some other library": "对应的支持CORS的CDN地址"
    }
  }
</script>
<script defer type="module" src="main.js"></script>

替换后import("Highcharts")就能正常执行，无需处理CORS问题。

3. 通过AWS CloudFront配置反向代理（若使用CloudFront） #

如果你的AWS部署基于CloudFront，可配置CloudFront作为CDN资源的反向代理，添加CORS响应头：

• 创建CloudFront行为，匹配特定路径（如/cdn-lib/*），将请求转发到目标CDN地址。
• 在CloudFront的响应头策略中添加Access-Control-Allow-Origin，值设为你的网站域名或*。
• 之后将importmap中的CDN地址替换为CloudFront的路径，请求就会通过CloudFront转发，规避跨域问题。

4. 临时方案：普通script标签引入+模块中显式访问window对象 #

如果不想改动加载逻辑，可保留普通<script>标签引入，在ES模块中通过window.Highcharts访问全局对象：

<!-- index.html -->
<script src="https://code.highcharts.com/10.3.3/highcharts.js"></script>
<script defer type="module" src="main.js"></script>

// main.js
// 直接通过window访问
const highcharts = window.Highcharts;
// 后续代码正常使用

内容的提问来源于stack exchange，提问作者LattePrincess