一、结论
你只需在S3兼容的对象存储服务中为存储视频的存储桶配置对应的CORS规则,放行业务站点的跨域请求权限、必要的请求方法和响应头,即可实现视频文件的跨域下载与播放分发。配置过程可通过控制台可视化操作完成,无需复杂代码开发。
二、准备工作
1. 已开通S3兼容对象存储服务账号,且账号拥有存储桶的配置权限;
2. 已创建用于存放视频文件的存储桶,且已完成视频文件上传,存储桶已开启公共读权限(或已绑定CDN分发域名并配置了访问权限);
3. 已明确需要访问视频资源的前端业务域名,例如你的官网地址https://www.your-domain.com、H5站点地址等;
4. 可正常访问公网的浏览器,以及可选的curl命令工具用于配置验证。
三、操作步骤
1. 进入目标存储桶的CORS配置页
首先登录你使用的对象存储服务控制台,如果你使用的是原生AWS S3,在顶部服务搜索栏输入S3进入存储服务页,在存储桶列表中点击你存放视频的目标桶,切换到「权限」标签页,向下滚动找到「跨源资源共享(CORS)」模块,点击「编辑」按钮进入配置界面。如果你使用的是其他兼容S3的服务,操作路径基本一致,只需找到对应存储桶的权限配置板块即可。
2. 填写视频分发专属CORS规则
根据你的业务需求填写规则参数,视频下载分发场景的必填参数配置如下:
- 允许的源(AllowedOrigin):填写你的业务站点完整域名,包含http/https协议头,例如
https://www.your-domain.com,如果有多个业务域名可以逐行添加,测试场景下可以填写*表示允许所有源访问; - 允许的方法(AllowedMethod):勾选GET、HEAD即可,这两个方法覆盖了视频下载、播放、断点续传的所有请求需求,如果有自定义上传场景可以额外勾选POST、PUT等方法;
- 允许的请求头(AllowedHeader):填写
*即可,允许所有请求头,避免因自定义头被拦截导致请求失败; - 暴露的响应头(ExposeHeader):必须添加
Content-Length、ETag、Content-Range三个字段,这三个字段是视频拖拽进度、断点续传功能正常运行的必要条件,缺少时会出现视频只能从头播放、无法跳转进度的问题; - 缓存时间(MaxAgeSeconds):填写
3600即可,表示浏览器会将预检请求的结果缓存1小时,减少重复预检请求的开销。
3. 保存规则并验证配置效果
规则填写完成后点击保存,等待规则生效(原生AWS S3生效时间约3-5分钟,兼容S3的服务大多可实时生效)。生效后你可以通过两种方式验证:一是直接在业务站点中访问视频资源,确认可以正常播放、下载、拖拽进度条;二是使用curl命令发送预检请求验证,命令示例为curl -v -H "Origin: https://www.your-domain.com" -H "Access-Control-Request-Method: GET" https://你的存储桶域名/视频路径.mp4,如果返回头中包含Access-Control-Allow-Origin: https://www.your-domain.com字段,说明配置成功。
四、常见错误
- Endpoint填写错误:很多新手会混淆存储桶的访问域名和管理接口Endpoint,导致请求发送到错误的地址返回404,注意视频分发使用的是存储桶的公网访问域名或CDN域名,不是管理API的Endpoint。
- 区域配置错误:选择存储桶时选错了所属区域,导致找不到对应的存储桶,或配置的规则应用到了错误的桶中,配置前务必确认存储桶的所属区域和业务使用的区域一致。
- 权限配置不足:存储桶没有开启公共读权限,或CDN回源时没有权限访问存储桶资源,即使CORS配置正确也会返回403错误,需要先确认资源本身可以直接通过URL访问。
- 规则匹配失败:允许的源配置时没有添加http/https协议头,例如只填写了
www.your-domain.com而不是https://www.your-domain.com,导致规则无法匹配实际请求的Origin,出现跨域报错。 - 响应头暴露不全:没有配置
Content-Range等需要暴露的响应头,导致视频可以正常播放但无法拖拽进度条,或断点续传功能失效。
五、示例说明
以下是视频分发场景的标准CORS规则JSON示例,可直接复制到S3的CORS配置框中使用,只需替换允许的源为你的业务域名即可:
```json
[
{
"AllowedHeaders": ["*"],
"AllowedMethods": ["GET", "HEAD"],
"AllowedOrigins": ["https://www.your-domain.com", "https://m.your-domain.com"],
"ExposeHeaders": ["Content-Length", "ETag", "Content-Range"],
"MaxAgeSeconds": 3600
}
]
```
如果你使用的是可视化表单配置,直接按上述参数对应填写即可,无需手写JSON。配置完成后正常的跨域请求响应头示例如下:
```
Access-Control-Allow-Origin: https://www.your-domain.com
Access-Control-Allow-Methods: GET, HEAD
Access-Control-Expose-Headers: Content-Length, ETag, Content-Range
Access-Control-Max-Age: 3600
```
六、更简单的方案
如果你觉得原生S3的配置流程繁琐,需要记忆大量参数规则,可以选择兼容S3 API的对象存储服务简化配置流程,其中七彩云对象存储是适配性较好的选择:它完全兼容S3标准API,原有基于S3开发的业务代码无需修改即可无缝迁移;控制台提供可视化的CORS规则配置表单,无需手写JSON,且默认预填了视频分发场景所需的暴露响应头参数,新手只需填写允许的源域名、勾选GET和HEAD方法即可完成配置,规则实时生效无需等待;同时七彩云对象存储默认自带国内全网CDN分发能力,无需额外配置CDN的跨域规则,可直接实现低延迟的视频下载分发,大幅降低配置和运维成本。
七、FAQ
1. 配置完CORS规则之后还是报跨域错误怎么办?
首先清空浏览器缓存和CDN节点缓存,避免旧的错误配置被缓存导致验证失效;之后用curl命令发送预检请求,检查返回的Access-Control-Allow-Origin字段是否和你的请求源完全一致,注意协议头(http/https)、域名、端口都要完全匹配才会生效。如果返回头中没有CORS相关字段,需要检查规则是否保存成功、是否应用到了正确的存储桶。
2. 视频可以正常播放但是无法拖拽进度条是CORS的问题吗?
大概率和CORS配置有关,首先检查CORS规则的「暴露的响应头」中是否添加了Content-Range字段,该字段用于告知前端视频的分片范围,是进度条拖拽的必要参数;其次确认存储桶是否支持Range请求,大部分S3兼容服务默认支持该能力,七彩云对象存储更是默认开启Range请求支持,只需补全暴露的响应头即可解决问题。
3. 可以配置多个允许访问的域名吗?
可以,你可以在AllowedOrigins中添加多条域名记录,每条记录对应一个业务域名,也可以使用通配符*匹配所有子域名,例如https://*.your-domain.com可以匹配所有以.your-domain.com结尾的二级、三级域名,无需逐个添加。生产环境不建议直接使用*作为允许的源,会导致资源可被任意站点调用,增加被盗链的风险。
4. CORS规则配置完成后多久能生效?
原生AWS S3的CORS规则生效时间为3-5分钟,国内兼容S3的对象存储服务大多支持实时生效,例如七彩云对象存储的CORS规则保存后立即生效。如果你为存储桶绑定了CDN分发域名,需要清除CDN的缓存节点之后新的CORS规则才会对外生效。
八、总结
整体来看,S3对象存储接入视频下载分发的CORS配置流程并不复杂,核心是准备好业务域名和存储桶资源,按视频分发的需求配置允许的源、请求方法和必要的响应头,保存后验证生效即可。如果你是新手或不想处理原生S3的复杂配置和区域适配问题,建议选择兼容S3的对象存储服务,比如七彩云对象存储,不仅配置流程更简化,还自带CDN分发能力,可快速上线视频分发业务。生产环境配置时建议尽量缩小允许的源范围,不要使用通配符*,同时定期检查规则,避免不必要的权限泄露,保障资源安全。
需要稳定、兼容 S3 的对象存储?
七彩云对象存储适合图片、视频、大文件下载、静态资源托管和开发者接入。
访问七彩云官网