2016-12-12 72 views
0

我有一個PWA託管在SharePoint Online上。服務工作人員獲取身份驗證

說明:https://weblogs.asp.net/soever/spa-series-turn-our-showtitle-app-into-a-progressive-web-app

代碼庫:https://github.com/svdoever/sharepoint-progressive-web-apps/tree/master/ShowTitleProgressiveWebApp

我使用的是服務人員,我試圖實現獲取請求的資源也住在同一個位置的緩存。 這些提取請求必須遵守針對SharePoint Online的STS服務器進行身份驗證,而我得到的錯誤,如下面的截圖:

"requests are blocked by CORS policy" errors

我對如何防止不知道「的請求被封鎖CORS策略「錯誤並獲得緩存工作。憑證標題是否不從網頁提取傳遞給服務工作人員提取?

我的服務人員的代碼如下:

/* code from https://developers.google.com/web/fundamentals/getting- started/primers/service-workers */ 

var CACHE_NAME = 'sptitle-cache-v1'; 
var urlsToCache = [ 
    'favicon-16x16.png', 
    'index.html', 
    'es6-promise.min.js', 
    'fetch.min.js' 
]; 

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

self.addEventListener('activate', function(event) { 
    console.log('Service Worker activating.'); 
}); 

self.addEventListener('fetch', function (event) { 
    console.log("service worker intercepting fetch()"); 
    event.respondWith(
     caches.match(event.request) 
      .then(function (response) { 
       // Cache hit - return response 
       if (response) { 
        console.log('respond from cache for url ' + response.url); 
        return response; 
       } 
       // IMPORTANT: Clone the request. A request is a stream and 
       // can only be consumed once. Since we are consuming this 
       // once by cache and once by the browser for fetch, we need 
       // to clone the response. 
       var fetchRequest = event.request.clone(); 
       console.log("fetching request: " + fetchRequest); 
       return fetch(fetchRequest).then(
        function (response) { 
         // Check if we received a valid response 
         if (!response || response.status !== 200 || response.type !== 'basic') { 
          //console.log("Invalid response from fetch(): ", response); 
          return response; 
         } 

         // IMPORTANT: Clone the response. A response is a stream 
         // and because we want the browser to consume the response 
         // as well as the cache consuming the response, we need 
         // to clone it so we have two streams. 
         var responseToCache = response.clone(); 

         caches.open(CACHE_NAME) 
          .then(function (cache) { 
           console.log("Cache the fetched response for request ", event.request); 
           cache.put(event.request, responseToCache); 
          }); 

         return response; 
        } 
       ); 
      } 
      ) 
    ); 
}); 

回答

0

您必須手動憑證模式轉到無CORS獲取請求。因爲你試圖訪問跨域請求,那麼

返回讀取(fetchRequest,{ '無CORS' 模式})。