代码之家 › 专栏 › 技术社区 › Csaba Toth

为什么S3存储桶的全局CORS策略不适用于存储桶中的所有文件?

cors download video amazon-s3

Csaba Toth · 技术社区 · 3 年前

我有一个S3存储桶用于媒体文件存储,最重要的是用于mp4视频。所有这些都有一个web前端。(没有涉及CloudFront,由于额外的费用,我不想注册一个。)当浏览器遇到mp4视频的原始URL时,默认行为是在单击时播放mp4文件(无论是就地播放还是在新选项卡中播放,具体取决于 target HTML标记)。然后,您可以从本机浏览器播放器下载视频,但这需要多次单击,我们有时会在播放列表中讨论40个视频,如果只下载视频,这将是一个巨大的生产力打击。

因此,用户需要一个下载按钮,可以下载视频而不是播放视频,这是可以理解的。经过几个小时的研究,我偶然发现 StreamSaver.js 这非常有效,我甚至可以给下载的视频起一个有意义的名字(运动员的名字、位置、球衣等等),而不是guid,但也有一个缺点:我遇到了CORS策略错误,比如 Access to fetch at 'https://sportsboardmedia.s3.amazonaws.com/uploads/video/{GUID}_{GUID}.mp4' from origin 'https://app.sportsboard.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

我的水桶从一开始就可供公众使用。经过一些研究后,我将我的bucket切换到静态网站托管模式( as per this SO entry ),我还应用了CORS策略 advised by this SO entry .