在服務工作者提取CORS請求失敗

我正在做一些關於服務工作者的發展。我們的建議非常簡單，只需記錄來自我們app.js的每個請求即可。我遵循Google網站的指南。我只需要一個偵聽器來獲取'fetch'事件。在服務工作者提取CORS請求失敗

我的應用程序和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

如果刪除了服務人員的代碼，直接調用API獲取，它工作正常。我可以將結果提取到我的服務器。 2版本代碼之間的唯一區別是服務器。我認爲這與CORS有關。 Github API非常好地處理CORS，但我們沒有。

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

我不明白爲什麼javascript線程中的代碼工作正常，但無法在服務工作器中工作。

我嘗試將默認獲取請求模式更改爲'no-cors'，但它不起作用。

來源

2017-09-25 crisli

查找結果。我的服務器是一個自簽名的https服務器。服務工作者無法CORS訪問自簽名的https服務器。

來源

2017-09-26 08:14:36 crisli

在服務工作者提取CORS請求失敗

回答

相關問題