Question

我正在做一些关于Service Worker的开发。我们的建议很简单，只需记录app.js的每个请求。我正在关注Google网站上的指南。我只需要一个'fetch'事件的监听器。

我的应用和API位于不同的主机中。

我的服务工作者代码如下：

self.addEventListener('fetch', (event) => {
  console.log(event.request);
  event.respondWith(async function() {
    const response = await fetch(event.requet);
    // we will do something here.
    return response;
  }());
});

我的app.js现在非常简单：

  const url = 'https://api.github.com/users/CrisLi'
  fetch(url)
    .then((response) => response.json())
    .then((json) => console.log(json))
    .catch((error) => console.log(error));

此版本代码效果很好，直到我将请求URL更改为另一台服务器（而不是GitHub）。

  const url = 'https://172.16.50.91:8080/BNfSZIiGMs37unHZXtnSFv5?access_token=WUMzMgAAAV63ciKxAACowFVEVXNvNEhudXVzS3FidXBsNTVSeGE1IAAAAANUODNfd0VWcXBMVTJsSWVWakJVWTBNNVpqbGlPR1V5Wmpr'
  fetch(url)
    .then((response) => response.json())
    .then((json) => console.log(json))
    .catch((error) => console.log(error));

此新服务器URL已支持CORS。但是，如果我在Service Worker代码中获取请求，则会发生错误。

The FetchEvent for "https://172.16.50.91:8080/BNfSZIiGMs37unHZXtnSFv5?access_token=WUMzMgAAAV63ciKxAACowFVEVXNvNEhudXVzS3FidXBsNTVSeGE1IAAAAANUODNfd0VWcXBMVTJsSWVWakJVWTBNNVpqbGlPR1V5Wmpr" resulted in a network error response: the promise was rejected.
Promise rejected (async)
self.addEventListener @ service-worker.js:62
Uncaught (in promise) TypeError: Failed to fetch
(index):25 GET https://172.16.50.91:8080/BNfSZIiGMs37unHZXtnSFv5?access_token=WUMzMgAAAV63ciKxAACowFVEVXNvNEhudXVzS3FidXBsNTVSeGE1IAAAAANUODNfd0VWcXBMVTJsSWVWakJVWTBNNVpqbGlPR1V5Wmpr net::ERR_FAILED
TypeError: Failed to fetch

如果我删除了Service Worker代码，请直接调用fetch API，它可以正常工作。我可以将结果提取到我的服务器。 2个版本代码之间的唯一区别是服务器。我认为这与CORS有关。 Github API处理CORS非常好，但我们没有。

如何在Service Worker中使用fetch API使其像普通的javascript一样工作？

我不明白为什么javascript线程中的代码工作正常，但无法在Service Worker中工作。

我尝试将默认提取请求模式更改为“no-cors”，但它不起作用。

Answer 1

查找结果。我的服务器是一个自签名的https服务器。 Service Worker无法通过CORS访问自签名的https服务器。

在Service Worker中获取CORS请求失败

1 个答案: