配置AWS CloudFront与S3解决SCORM跨域访问问题求助

问题本质 #

你遇到的是典型的浏览器同源策略限制：SCORM资源托管在CloudFront域名下，而加载它的播放器页面在mylms.com，跨域场景下浏览器会校验CORS规则，只有两端配置完全匹配才能正常加载资源。直接访问CloudFront正常是因为无跨域场景，嵌入iframe后跨域校验触发才会拦截请求。

关键CloudFront配置步骤 #

1. 先配置正确的S3桶CORS规则 #

S3作为源站，必须明确允许mylms.com的跨域请求，示例配置如下（替换成你的实际域名，可添加本地开发规则方便调试）：

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>https://mylms.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>OPTIONS</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
    <ExposeHeader>Content-Length</ExposeHeader>
    <ExposeHeader>Content-Type</ExposeHeader>
  </CORSRule>
  <CORSRule>
    <AllowedOrigin>http://localhost:*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>OPTIONS</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

注意：S3的CORS规则变更后需等待数分钟生效，不要刚修改就立即测试。

2. 配置CloudFront转发Origin请求头 #

CloudFront默认会过滤浏览器发送的Origin头，导致S3无法识别跨域请求，也就不会返回CORS响应头。解决方法：

• 进入CloudFront控制台，找到对应分发，编辑目标行为
• 在「缓存键和源请求策略」中，选择或新建包含Origin头的源请求策略，确保该头被转发到S3
• 同时，缓存策略需允许基于Origin头缓存，避免不同域名请求共用缓存导致CORS头混乱

3. 用CloudFront自定义响应头补全CORS信息 #

如果S3返回的CORS头不全，或CloudFront缓存了不带CORS头的旧响应，可直接在CloudFront中强制添加响应头：

• 在行为设置的「自定义响应头」中，添加以下项：
  • Access-Control-Allow-Origin: https://mylms.com（生产环境建议指定具体域名，不要用*）
  • Access-Control-Allow-Methods: GET, HEAD, OPTIONS
  • Access-Control-Allow-Headers: *
• 针对iframe嵌入限制，添加Content-Security-Policy: frame-ancestors https://mylms.com;（兼容性比X-Frame-Options更好）

4. 处理OPTIONS预检请求 #

如果浏览器控制台报OPTIONS请求失败，需确保S3和CloudFront都允许OPTIONS方法：

• S3的CORS规则已包含<AllowedMethod>OPTIONS</AllowedMethod>，再检查CloudFront行为是否允许OPTIONS方法（默认允许，可确认配置）

替代方案：CloudFront反向代理（对标RusticSoftware的方案） #

若上述配置仍无效，可将CloudFront配置为LMS的反向代理，让SCORM资源与LMS同域：

• 在CloudFront中新增行为，路径匹配/scorm/*，源指向你的S3桶
• 将CloudFront自定义域名设为mylms.com的子域名（如scorm.mylms.com），或在mylms.com下配置路由规则，将/scorm/*请求转发到CloudFront
• 此时播放器请求mylms.com/scorm/xxx时，实际由CloudFront拉取S3资源，因同域不会触发CORS校验

验证方法 #

1. 用curl模拟跨域请求，检查响应头是否包含正确的CORS信息：

curl -H "Origin: https://mylms.com" -I https://your-cloudfront-domain/path/to/scorm/file.js

需返回Access-Control-Allow-Origin: https://mylms.com。
2. 清除CloudFront缓存（在分发的「缓存」选项中创建无效化，路径填/*），避免旧缓存干扰。
3. 刷新LMS页面，查看浏览器控制台的CORS错误是否消失。

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