2016-12-12 26 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' 模式})。