S3+CloudFront签名Cookie实现HLS流开启访问限制触发CORS错误问题

数据老陈

2026-10-3

问题核心成因

开启CloudFront观看者访问限制后触发CORS的根因是：浏览器发起跨域带凭据请求前，会先发送不带任何Cookie的OPTIONS预检请求。此时CloudFront会对所有请求（包括OPTIONS）校验签名Cookie，预检请求没有对应签名Cookie，直接被CloudFront返回403拒绝，不会转发到S3返回正确的CORS头，因此触发CORS错误。关闭访问限制时OPTIONS请求可正常通过，所以没有报错。

修复方案

1. CloudFront配置调整

进入对应CloudFront分发的行为设置，新增OPTIONS请求例外规则，配置OPTIONS请求不需要签名验证直接放行
行为配置中开启转发Origin请求头，同时配置响应头策略，添加Access-Control-Allow-Credentials: true，且Access-Control-Allow-Origin返回请求对应的具体域名，不可使用通配符*
缓存策略中将Origin头纳入缓存key，避免不同域名的CORS响应缓存错乱

2. 前端配置修正

当前video标签的crossorigin: 'anonymous'配置和播放器的withCredentials: true冲突，带凭据请求必须将crossorigin值改为use-credentials：

const options = {
    crossorigin: 'use-credentials',
}
var player = videojs('video',options);

player.src({
    src: 'https://vod.cledge.io/videos/y2mate.m3u8',
    type: 'application/x-mpegURL',
    withCredentials: true
});

3. S3 CORS配置补充

当前S3 CORS配置缺少允许凭据的配置，需要新增AllowCredentials字段，确认前端页面部署的域名已在AllowedOrigins列表中：

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "POST",
            "GET",
            "PUT",
            "HEAD"
        ],
        "AllowedOrigins": [
            "https://cledge.io",
            "https://api.cledge.io",
            "http://localhost"
        ],
        "ExposeHeaders": [
            "x-amz-server-side-encryption",
            "x-amz-request-id",
            "x-amz-id-2"
        ],
        "AllowCredentials": true
    }
]

4. 后端配置修正

Cookie属性补充

当前生成签名Cookie时没有配置Secure、SameSite和Path属性，跨域场景下浏览器会拒绝写入第三方Cookie，需调整CloudFront工具类的Cookie配置：

Cookie policy = new Cookie(cookies.getPolicy().getKey(), cookies.getPolicy().getValue());
policy.setDomain("cledge.io");
policy.setSecure(true);
policy.setSameSite("None");
policy.setPath("/");

Cookie signature = new Cookie(cookies.getSignature().getKey(), cookies.getSignature().getValue());
signature.setDomain("cledge.io");
signature.setSecure(true);
signature.setSameSite("None");
signature.setPath("/");

Cookie keyPairId = new Cookie(cookies.getKeyPairId().getKey(), cookies.getKeyPairId().getValue());
keyPairId.setDomain("cledge.io");
keyPairId.setSecure(true);
keyPairId.setSameSite("None");
keyPairId.setPath("/");

Controller跨域配置修正

当前VideoController的@CrossOrigin(origins = "https://vod.cledge.io")配置有误，该接口如果是给前端页面调用返回带签名Cookie的页面，origins需要填写你前端页面实际部署的域名。

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