将Stencil JS组件导入本地HTML文件时遭遇CORS及模块导入错误

核心原因 #

模块脚本（type="module"）遵循严格的跨域资源共享（CORS）规则，而普通脚本的跨域限制更宽松。你遇到的偶尔报错，大概率是CloudFront缓存了未配置CORS响应头的旧资源，导致部分请求命中缓存时触发错误。

具体解决步骤 #

1. 配置S3存储桶的CORS规则

登录AWS控制台，找到目标S3存储桶，进入「权限」→「跨域资源共享（CORS）」，替换为以下配置（适配本地file://协议的null origin，同时兼容生产环境）：

[
    {
        "AllowedHeaders": ["*"],
        "AllowedMethods": ["GET"],
        "AllowedOrigins": ["*"],
        "ExposeHeaders": []
    }
]

若需更严格的权限控制，可将AllowedOrigins指定为["null", "https://your-production-domain.com"]，但*更适合调试阶段。

2. 调整CloudFront缓存行为

CloudFront需要转发Origin请求头，并将其纳入缓存键，避免不同来源的请求共享缓存：

• 进入CloudFront控制台，找到目标分发，进入「行为」标签编辑对应缓存行为
• 在「转发请求头」中选择「自定义」，添加Origin头
• 在「缓存策略」中，选择默认的「CORS-S3Origin」策略，或自定义策略时勾选「Origin」作为缓存键的一部分

3. 强制刷新CloudFront缓存

由于之前的缓存可能已存储无CORS头的响应，需手动触发失效：

• 在CloudFront分发的「失效」标签，创建失效请求，路径填/*（或具体的组件脚本路径），等待失效完成（通常需数分钟）

4. 本地测试的临时替代方案

若暂时无法修改CDN配置，可通过本地HTTP服务器打开HTML文件，规避file://协议的null origin问题：

• Python环境：执行python -m http.server 8000，访问http://localhost:8000/your-file.html
• Node.js环境：先安装http-server（npm install -g http-server），再运行http-server，访问对应地址

关于移除type="module"的报错说明 #

Stencil生成的ESM模块依赖import语句，而普通脚本（无type="module"）不支持ES模块语法，因此必须保留type="module"，不能通过移除它来解决问题。

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