서비스 근로자에 대한 몇 가지 개발을하고 있습니다. 우리의 제안은 매우 간단합니다. 우리 app.js의 모든 요청을 기록하십시오. Google 웹 사이트에서 가이드를 따르고 있습니다. '가져 오기'이벤트를 수신하기 만하면됩니다.CORBA 요청을 서비스 근로자에게 반입하지 못했습니다.
내 앱과 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를 지원합니다. 그러나 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를 잘 처리하지만 우리는 CORS를 처리하지 않습니다.
서비스 근로자에서 fetch API를 사용하여 정상적인 자바 스크립트처럼 작동하게하는 방법은 무엇입니까?
자바 스크립트 스레드의 코드가 제대로 작동하지만 서비스 근로자에서 작동하지 않는 이유를 모르겠습니다.
기본 가져 오기 요청 모드를 'no-cors'로 변경하려고 시도하지만 작동하지 않습니다.