Question

我在SharePoint Online上托管了一个PWA。

说明：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服务器执行的身份验证，并且我会收到错误，如下面的屏幕截图所示：

我不清楚如何防止“请求被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;
                    }
                );
            }
            )
    );
});

Answer 1

您必须在获取请求中手动传递 no-cors 凭据模式。

即返回抓取（fetchRequest，{mode：＆＃39; no-cors＆＃39;}）。然后

因为您正在尝试访问跨源请求。

服务工作者获取身份验证

1 个答案: