无法使用模式为"导航"的请求和非空的RequestInit构造请求

Question

无法使用模式为"导航"的请求和非空的RequestInit构造请求

考虑这个示例index.html文件.

<!DOCTYPE html>
<html><head><title>test page</title>
<script>navigator.serviceWorker.register('sw.js');</script>
</head>
<body>
<p>test page</p>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

使用此Service Service,旨在从缓存加载,然后在必要时回退到网络.

cacheFirst = (request) => {
    var mycache;
    return caches.open('mycache')
        .then(cache => {
            mycache = cache;
            cache.match(request);
        })
        .then(match => match || fetch(request, {credentials: 'include'}))
        .then(response => {
            mycache.put(request, response.clone());
            return response;
        })
}

addEventListener('fetch', event => event.respondWith(cacheFirst(event.request)));

Run Code Online (Sandbox Code Playgroud)

这在Chrome 62上失败了.刷新HTML根本无法在浏览器中加载,并显示"无法访问此站点"错误; 我必须转移刷新以摆脱这种破碎的状态.在控制台中,它说:

未捕获(承诺)TypeError:无法在'ServiceWorkerGlobalScope'上执行'fetch':无法构造具有模式为'navigate'的请求和非空RequestInit的请求.

"构建请求"？!我没有构建请求.我正在使用事件的请求,未经修改.我在这做错了什么？

Answer 1

Dan*_*ich 13

根据进一步的研究,事实证明我正在构建一个请求fetch(request, {credentials: 'include'})!

每当您传递一个options对象时fetch,该对象就是RequestInit,并且Request当您这样做时它会创建一个新对象.而且,呃,显然你不能要求fetch()创建一个新的Requestin navigate模式和一个非空的RequestInit由于某种原因.

在我的情况下,事件的导航Request已经允许凭据,因此修复是转换fetch(request, {credentials: 'include'})为fetch(request).

{credentials: 'include'}由于这篇Google文档文章,我被愚弄以为我需要.

使用fetch时,默认情况下,请求不会包含cookie等凭据.如果您需要凭据,请致电:
fetch(url, {
  credentials: 'include'
})
Run Code Online (Sandbox Code Playgroud)

只有传递获取URL时才会这样,就像在代码示例中一样.如果您有一个Request对象,就像我们通常在Service Worker中所做的那样,Request知道它是否要使用凭据,那么fetch(request)通常会使用凭据.

归档时间：	8 年，3 月前
查看次数：	1690 次
最近记录：	8 年，3 月前