javascript - SW-Toolbox 防止加载跨源视频

Question

我正在使用 Google's SW-Toolbox library在我的应用程序中处理服务人员的职责；但是，每当我尝试从 Parse 加载视频(使用 Parse 进行文件托管)时，我都会在控制台中收到一系列与 CORS 相关的错误，并且视频不会显示。我知道涉及 SW-Toolbox，因为当我删除 service worker 时，或者在不支持 service worker 的浏览器中，视频加载正常。谁能帮助破译这些错误，和/或提供解决方法？谢谢。

我用于呈现视频的代码实际上就是 HTML5 视频元素:

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

注意:这不仅仅是一个 Parse 问题；我从网络 ( http://techslides.com/demos/sample-videos/small.mp4 ) 尝试了另一个随机 mp4 URL，但遇到了完全相同的问题。

Answer 1

第一个错误，“Fetch API cannot load...”，表示您的 service worker 正在拦截对视频的请求，这是一个跨源请求，并试图获取文件本身；但服务器不允许跨源请求，因此获取失败。

这听起来很像 sw-toolbox 错误 https://github.com/GoogleChrome/sw-toolbox/issues/49 ，受 Chrome 错误影响 https://bugs.chromium.org/p/chromium/issues/detail?id=546076 .

https://github.com/GoogleChrome/sw-toolbox/issues/49#issuecomment-170868923 中建议的解决方法就是不要在请求的 fetch 处理程序中调用 event.respondWith()，这对于 sw-toolbox 意味着确保您没有定义处理请求的路由使用 event.respondWith()(既不是特定路由也不是默认路由)。