Visual Studio Firefox“ServiceWorker向FetchEvent.respondWith()传递了一个承诺,该承诺解析为非响应值”未定义“”(针对本地服务器)

wvt8vs2t  于 2022-11-17  发布在  其他
关注(0)|答案(2)|浏览(200)

当从Visual Studio运行本地服务器时,Firefox将出错,无法正确加载页面。它显示以下错误:

Failed to load ‘https://localhost/js/mqtt.js’. A ServiceWorker passed a promise to FetchEvent.respondWith() that resolved with non-Response value ‘undefined’. serviceworker.js:19:10

它在Chrome上运行得很好。当服务器位于基于云的Azure服务器上时,它在Firefox上也运行得很好。以下是服务工作者的代码:

// Service worker file for PWA
var CACHE_NAME = 'v5';
var urlsToCache = [
    '/index.html'
];

self.addEventListener('install', function (event) {
    // Perform install steps
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(function (cache) {
                console.log('Opened cache');
                return cache.addAll(urlsToCache);
            })
    );
});

self.addEventListener('fetch', event => {
    event.respondWith(
        fetch(event.request).then(response => {
            cache.put(event.request, response.clone());
            return response;
        }).catch(_ => {
            return caches.match(event.request);
        })
    )
});

我不确定此错误是由什么引起的。一个解决方法是转到“about:debugging#worker”并手动注销serviceworker。然后刷新页面将允许正确加载。但是,我需要解决方案,而不是解决方法。

vatpfxk5

vatpfxk51#

根据该代码,如果满足以下两个条件,我希望看到该错误消息:

  • fetch(event.request)拒收。
  • caches.match(event.request)导致缓存未命中,这导致promise解析为undefined

这实际上并不奇怪-这只是您在service worker中编写的逻辑,其行为取决于当前的网络/服务器条件以及本地缓存的状态。

svmlkihl

svmlkihl2#

同样的错误也发生在我身上。问题是我在服务器上禁用了CORS。
在服务器上为所有路线启用CORS解决了这个问题。

// Enable cors for all routes
app.use(cors(corsOptions));
// To enable cors only for a single route must be added on the app.get
// app.get('/', cors(corsOptions), nextCallback() )

相关问题