我需要实现 serviceworker 文件缓存，但使用 no-cors 标志。这是因为我的网络服务器上出现以下代码的 CORS 错误。代码来自标准的 Ionic 2 入门模板（在 serviceworker.js 中）。我无法使用标准代码，因为出于某种原因，请求会触发身份验证流，其中重定向到某个 URL，但由于 CORS 错误而失败。
我将如何以最好的（cq。最简单的）方式做到这一点？
// TODO: Implement this without CORS (set no-cors flag)
self.toolbox.precache(
[
// './build/main.js',
// './build/vendor.js',
// './build/main.css',
// './build/polyfills.js',
// 'index.html',
// 'manifest.json'
]
);
编辑：这并不是真正发生的身份验证错误，用户肯定已经过身份验证。但是由于身份验证期间的重定向，对上述文件的请求出错了。我找到了这篇文章：什么是不透明请求，它的用途是什么？这表明设置 no cors 标志将是解决方案。我得到的错误，就像在那个页面上一样：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问源 ' http://abc '。如果不透明响应满足您的需求，请将请求的模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。
像下面这样自己解决了。install 事件触发应用程序在本地存储文件。
/**
* Check out https://googlechromelabs.github.io/sw-toolbox/ for
* more info on how to use sw-toolbox to custom configure your service worker.
*/
'use strict';
importScripts('./build/sw-toolbox.js');
self.toolbox.options.cache = {
name: 'ionic-cache'
};
// pre-cache our key assets
// TODO: Implemente this without using CORS (set no-cors flag)
/*
self.toolbox.precache(
[
'./build/main.js',
'./build/vendor.js',
'./build/main.css',
'./build/polyfills.js',
'index.html',
'manifest.json'
]
);
*/
// MANUAL precaching in order to evade CORS error on SharePoint
var aFilesToCache = [
'./assets/json/propertyLUT.js',
'./assets/json/propertyvalues.js',
'./build/main.js',
'./build/vendor.js',
'./build/main.css',
'./build/polyfills.js',
'index.html',
'manifest.json'
];
self.addEventListener('fetch', function(event) {
console.log('Handling fetch event for', event.request.url);
event.respondWith(
// Opens Cache objects that start with 'font'.
caches.open('pwa_').then(function(cache) {
return cache.match(event.request).then(function(response) {
if (response) {
console.log('Found response in cache:', response);
return response;
}
}).catch(function(error) {
// Handles exceptions that arise from match() or fetch().
console.error('Error in fetch handler:', error);
throw error;
});
})
);
});
self.addEventListener('install', event => {
function onInstall(event, filesToCache) {
console.log('Hit event INSTALL');
return Promise.all(filesToCache.map(function(aUrl)
{
return caches.open('pwa_').then(function(cache)
{
debugger;
aUrl = resolveURL(aUrl, self.location.href);
return fetch(aUrl, { mode: 'no-cors' })
.then(function(response)
{
return cache.put(aUrl, response.clone());
});
})
}))
}
event.waitUntil(
onInstall(event, aFilesToCache).then( () => self.skipWaiting() )
);
});
function resolveURL(relative, base) {
var stack = base.split("/"),
parts = relative.split("/");
stack.pop(); // remove current file name (or empty string)
// (omit if "base" is the current folder without trailing slash)
for (var i=0; i<parts.length; i++) {
if (parts[i] == ".")
continue;
if (parts[i] == "..")
stack.pop();
else
stack.push(parts[i]);
}
return stack.join("/");
}
/*
foreach(aUrl in aFilesToCache)
{
var corsRequest = new Request(url, {mode: 'no-cors'});
fetch(corsRequest).then(response => {
return cache.put("pwa_" + url, response);
}); // response won't be opaque.
}
*/
// dynamically cache any other local assets
self.toolbox.router.any('/*', self.toolbox.fastest);
// for any other requests go to the network, cache,
// and then only use that cached resource if your user goes offline
self.toolbox.router.default = self.toolbox.networkFirst;
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句