无法在RangeRequest访问arrayBuffer(Can't access arra

试图解决在这篇文章中提到的问题： https://philna.sh/blog/2018/10/23/service-workers-beware-safaris-range-request/这里： PWA -缓存的视频将不会在手机上玩Safari浏览器（11.4）

问题的根源在于，我们无法显示在Safari浏览器的视频。 文章说，对这个问题的修复，但似乎导致Chrome上的另一个问题。 在我们的解决方案的区别是，我们没有使用缓存。 目前，我们只是想通过我们的服务人员的要求。 实施看起来是这样的：

self.addEventListener('fetch', function (event){
    if (event.request.cache === 'only-if-cached' && event.request.mode !== 'same-origin') {
        return;
    }

    if (event.request.headers.get('range')) {
        event.respondWith(returnRangeRequest(event.request));
    } else {
        event.respondWith(fetch(event.request));
    }
});

function returnRangeRequest(request) {
return fetch(request)
    .then(res => {
        return res.arrayBuffer();
    })
    .then(function(arrayBuffer) {
        var bytes = /^bytes\=(\d+)\-(\d+)?$/g.exec(
            request.headers.get('range')
        );
        if (bytes) {
            var  start = Number(bytes[1]);
            var end = Number(bytes[2]) || arrayBuffer.byteLength - 1;
            return new Response(arrayBuffer.slice(start, end + 1), {
                status: 206,
                statusText: 'Partial Content',
                headers: [
                    ['Content-Range', `bytes ${start}-${end}/${arrayBuffer.byteLength}`]
                ]
            });
        } else {
            return new Response(null, {
                status: 416,
                statusText: 'Range Not Satisfiable',
                headers: [['Content-Range', `*/${arrayBuffer.byteLength}`]]
            });
        }
    });
}

我们得到的范围请求获取返回数组缓冲区，但它具有零byteLength并显示为空。 的范围内报头实际上包含“字节= 0-”和随后的请求具有一个起始值，但没有端值。

也许有一些特征检测，我们可以做，以确定它的Chrome，我们只需调用定期取？ 我宁愿有，虽然作品无处不在的解决方案。 此外RES是显示类型：“不透明”所以也许有什么关系呢？ 不知道如何看下一步该怎么。 如果我们解决不了的问题，为Chrome我可能需要为Safari浏览器不同的解决方案。

Answer 1:

看来，它是不透明的响应。 我不知道，在默认情况下取为“nocors”。 添加“CORS”模式和覆盖范围头似乎已经允许重写Chrome上运行。 可悲的是，它仍然无法在Safari上工作，但我能够正确地设定CORS值后访问arrayBuffer。

下面是我不得不做出的改变：

var myHeaders = {};
return fetch(request, { headers: myHeaders, mode: 'cors', credentials: 'omit' })
    .then(res => {
        return res.arrayBuffer();
    })

该服务器允许与响应报头是很重要的。 例如

access-control-allow-methods: GET
access-control-allow-origin: *

文章来源: Can't access arrayBuffer on RangeRequest