CloudFront+S3架构下OPTIONS请求缺失CORS跨域头导致videojs无法播放视频

问题根因 #

你S3存储桶的CORS配置仅允许了GET、HEAD方法，浏览器发送的CORS预检请求为OPTIONS方法，S3不会为未被允许的方法返回对应的CORS响应头，这就是OPTIONS请求缺失Access-Control-Allow-Origin头的核心原因。

具体修复步骤 #

1. 修改S3存储桶CORS规则 #

在AllowedMethods中新增OPTIONS方法，同时删除无效的暴露头配置，修正后完整配置如下：

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD",
            "OPTIONS"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "ETag",
            "Content-Length",
            "Accept-Ranges",
            "Content-Range"
        ],
        "MaxAgeSeconds": 3000
    }
]

注：Access-Control-Allow-Origin是CORS标准响应头，不需要手动配置到ExposeHeaders中

2. 调整CloudFront缓存策略 #

你当前缓存策略的包含头部列表中加入了Access-Control-Allow-Origin，这是响应头不能作为缓存键的组成部分，直接删除该项，保留以下三个请求头即可：

• Origin
• Access-Control-Request-Method
• Access-Control-Request-Headers

3. 清理CloudFront缓存 #

对CloudFront分发执行/*全路径缓存失效，清掉之前已经缓存的错误OPTIONS响应，等待10-15分钟配置生效后再测试即可。

可选优化 #

可以将CloudFront响应头策略中的Access-Control-Max-Age调整为86400，降低浏览器重复发送预检请求的频率，提升加载速度。

修改完成后，videojs发送的OPTIONS预检请求就能拿到正确的CORS响应头，后续的分片GET请求会正常发送，视频即可正常播放。

内容的提问来源于stack exchange，提问作者Joseph Van Riper