CODEWITHSUNDEEP
javascriptvideocorsservice-worker
Ruben Martinez Jr.
Ruben Martinez Jr.

Reputation: 3110

SW-Toolbox prevents cross-origin video from loading

I'm using Google's SW-Toolbox library in my app for handling service worker duties; however, whenever I try to load a video from Parse (using Parse for file hosting), I get a series of CORS-related errors in the console and the video doesn't display. I know SW-Toolbox is involved because when I remove the service worker, or in browsers where service worker is not supported, the video loads fine. Could anyone help decipher these errors, and/or provide a workaround? Thanks.

My code for rendering the video is literally just the HTML5 video element:

<video src="https://files.parsetfss.com/0e1eb489-e25d-429b-86a9-d75a65253a09/tfss-1eedfc22-4219-443d-9f16-0d879f2c378a-Taylor%20Swift%20-%20Blank%20Space.mp4" controls>

enter image description here

NOTE: this isn't just a Parse issue; I tried another random mp4 URL from the web (http://techslides.com/demos/sample-videos/small.mp4) and had the same exact issue.

Upvotes: 1

Views: 249

Answers (1)

Myk Melez
Myk Melez

Reputation: 1110

The first error, "Fetch API cannot load…", says that your service worker is intercepting the request for the video, which is a cross-origin request, and attempting to fetch the file itself; but the server doesn't permit cross-origin requests, so the fetch is failing.

This sounds a lot like sw-toolbox bug https://github.com/GoogleChrome/sw-toolbox/issues/49, which is affected by Chrome bug https://bugs.chromium.org/p/chromium/issues/detail?id=546076.

The suggested workaround in https://github.com/GoogleChrome/sw-toolbox/issues/49#issuecomment-170868923 is to not call event.respondWith() in the fetch handler for the request, which for sw-toolbox means ensuring that you don't define a route that handles the request with event.respondWith() (neither a specific route nor the default route).

Upvotes: 2

Related Questions