Im getting this error and I don´t know how to fix it.The site is live so therefor I don´t want to test a lot of stuff, breaking it wile testing. I guess the problem is in my web.config file and that its related to the service worker that I use to cache files since that is using "fetch".
The error Im getting.
Fetch API cannot load https://www.google-analytics.com/j/collect?... due to access control checks.
[Error] Failed to load resource: Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true.
And the web.config file looks like this.
<httpProtocol>
<customHeaders>
<add name="Cache-Control" value="public, max-age=365000000" />
<!--<add name="Access-Control-Allow-Origin" value="['https://mydomain.se','http://dibspayment.eu','https://checkout.dibspayment.eu','https://www.google-analytics.com']" />-->
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Methods" value="'HEAD,OPTIONS, GET, POST, PUT, PATCH, DELETE'" />
<add name="Access-Control-Allow-Headers" value="'X-Requested-With, Origin, Content-Type, X-Auth-Token, Accept, Authorization, Content-Length,Access-Control-Allow-Origin, Access-Control-Allow-Methods,Cache-Control'" />
</customHeaders>
</httpProtocol>
My service worker looks like this.
self.addEventListener('install', function(event) {
self.skipWaiting()
event.waitUntil(
caches.open('v19').then(function(cache) {
return cache.addAll([
'/js/jquery.cookie.js',
'/js/jquery.sumoselect.min.js',
'/js/wookmark.min.js',
'/js/imagesloaded.pkgd.min.js',
'/js/exif/exif.min.js',
'/js/exif/load-image.min.js',
'/js/exif/load-image-scale.min.js',
'/js/exif/load-image-orientation.min.js',
'/fonts/Framework7Icons-Regular.woff2',
'/fonts/Framework7Icons-Regular.woff',
'/fonts/Framework7Icons-Regular.ttf',
'/fonts/Framework7Icons-Regular.eot',
]);
//caches.open(v2)
//.then( cache = cache.match('/js/v5/framework7.bundle.min.js'))
//.then( res =res.text())
//.then( js = console.log(js))
})
);
});
self.addEventListener('fetch', function(event) {
if (event.request.clone().method === 'GET') {
event.respondWith(
caches.open("v19").then(function (cache) {
return fetch(event.request).then(function (res) {
cache.put(event.request, res.clone());
return res;
})
})
)
} else if (event.request.clone().method === 'POST') {
// attempt to send request normally
event.respondWith(fetch(event.request.clone()).catch(function
(error) {
// only save post requests in browser, if an error occurs
//savePostRequests(event.request.clone().url, form_data)
}))
}
});
self.addEventListener('activate', function(event) {
var cacheKeeplist = ['v19'];
event.waitUntil(
caches.keys().then(function(keyList) {
return Promise.all(keyList.map(function(key) {
if (cacheKeeplist.indexOf(key) === -1) {
return caches.delete(key);
}
}));
})
);
});
How should I do with the Access-Control-Allow-Origin? I guess that´s where the problem is, or? Any input really appreciated, thanks.
Solution: Ok so I changed it to this so it is not caching google.analytis and the error went away.
self.addEventListener('fetch', function(event) {
if (( event.request.url.indexOf( 'analytics' ) !== -1 ) || ( event.request.url.indexOf( 'checkout' ) !== -1 )){
}else{
if (event.request.clone().method === 'GET') {
event.respondWith(
caches.open("v19").then(function (cache) {
return fetch(event.request).then(function (res) {
cache.put(event.request, res.clone());
return res;
})
})
)
} else if (event.request.clone().method === 'POST') {
// attempt to send request normally
event.respondWith(fetch(event.request.clone()).catch(function
(error) {
// only save post requests in browser, if an error occurs
//savePostRequests(event.request.clone().url, form_data)
}))
}
}
});
