0
サービスワーカーについていくつかの開発を行っています。私たちの提案は非常にシンプルです。私たちのapp.jsからのすべてのリクエストを記録してください。私はGoogleのウェブサイトからガイドを守っています。私は 'フェッチ'イベントのリスナーが必要です。フェッチ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は今非常に簡単です：私は（別のサーバーにリクエストURLをない変更するまで
const url = 'https://api.github.com/users/CrisLi'
fetch(url)
.then((response) => response.json())
.then((json) => console.log(json))
.catch((error) => console.log(error));
このバージョンのコードはうまく機能します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をサポートしています。しかし、サービスワーカーコードで要求を取得すると、エラーが発生しました。
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を非常にうまく処理しますが、そうではありません。
サービスワーカーでfetch APIを使用して通常のjavascriptのように動作させるにはどうすればよいですか？
javascriptスレッドのコードが正常に動作する理由はわかりませんが、サービスワーカーでは動作しません。
デフォルトのフェッチ要求モードを「no-cors」に変更しようとしましたが、動作しません。