3

I have an S3 bucket used for media file storage, most importantly for mp4 videos. There is a web front-end to all of that. (There's no CloudFront involved and I don't want to sign up for one due to extra cost.) When a browser encounters the raw URL to an mp4 video the default behavior is to play the mp4 file upon clicking (either in place or in a new tab depending on the target HTML tag). Then you could download the video from the native browser player but that takes many clicks and we are talking about sometimes 40 videos in a playlist and it'd be a huge productivity hit vs if the videos would just download.

So understandably a user need emerged for a download button which would allow the download of the video instead of playing it. After hours of research I stumbled upon StreamSaver.js which works great, and I can even give the downloaded video a meaningful name (with the athlete name, position, jersey#, etc) instead of the GUIDs, but there's a downside: I hit CORS policy errors like 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.

My bucket was accessible to the public from the get go. After some research I switched my bucket over to static website hosting mode (as per this SO entry), and I also applied a CORS policy advised by this SO entry.

enter image description here

The current situation is that some video files are downloadable now, but other files (we are talking about the same bucket) still throw CORS errors. How is that even possible? The CORS policy supposed to be global to the whole bucket and every file should be equal from CORS point of view as far as I know. Where do I even start to fix this?

I applied this CORS policy a few days ago and my bucket contains about 5TB of videos. I think that's not a big whop for Amazon. Here is an example athlete locker where some of the videos throw CORS error: https://app.sportsboard.io/playerlocker/media/event/6272C5BE-CE03-4344-BED1-29369306C831/5e267f70-f1de-11e7-b8d3-f23c91087063/videos/

I opened an AWS Forum post as well, but all I hear is crickets there too: https://forums.aws.amazon.co/thread.jspa?messageID=991094#991094

Now I opened an AWS IQ request as well: https://iq.aws.amazon.com/p/N3SFMRLKRH

I recorded a video too: https://youtu.be/Dy38JRI5-oU

Maybe I should record a TikTok video as well???

Csaba Toth
  • 10,021
  • 5
  • 75
  • 121
  • No solution as far as I know yet – Csaba Toth Jan 27 '23 at 00:46
  • I have a similar issue as well. I have a bucket with uploaded mp4 videos. A lot of the time, on the first load I get the CORS error. When I refresh it works. I have the same policy as yours. – pzagor2 Mar 15 '23 at 06:43

1 Answers1

0

Take a look at this response from another StackOverflow thread. It has a good explanation of what is possibly going on: https://stackoverflow.com/a/55265139/1025364

The suggested workaround is to use crossorigin="anonymous" on image and video DOM elements.

pzagor2
  • 709
  • 10
  • 24