已解决-如何修复 web.config 文件中的访问控制错误？

Question

我遇到了这个错误，我不知道如何修复它。该网站是实时的，因此我不想测试很多东西，在测试中破坏它。 我猜问题出在我的 web.config 文件中，并且它与我用来缓存文件的 service worker 相关，因为它使用的是“fetch”。

我遇到的错误。

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.

web.config 文件看起来像这样。

<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>

我的 Service Worker 看起来像这样。

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);
        }
      }));
    })
  );
});

我应该如何处理 Access-Control-Allow-Origin？我想这就是问题所在，还是？ 任何意见都非常感谢，谢谢。

解决方案： 好的，所以我将其更改为这样，因此它不会缓存 google.analytis 并且错误消失了。

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)
        }))
      }
}
});

Answer 1

这不是您web.config 的问题，而是 Google Analytics (GA) 服务器的问题。因此，您必须调整请求以满足 GA 要求。

1. GA 响应不想被缓存（绿色下划线）。所有统计数据的传输都在发送请求中完成，答案只是确认发送（1gfr之类的文本）。

2. GA 不接受带有凭据（红色下划线）的请求，因为：
   - 存在通配符 * in Access-Control-Allow-Origin 响应标头
   - 响应标头中缺少 Access-Control-Allow-Credentials: true

因此 GA 等待没有凭据的跨域请求（不应发送任何身份验证 cookie）。 feth() 通过default 使用mode: 'cors', credentials: 'same-origin'（仅向同源请求发送凭据），因此一切都应该没问题。

但如果您仍然遇到上述 CORS 错误，则表示某些浏览器会发送凭据。尝试通过 Mozilla 将 Request.credentials 设置为 "omit" 为 recommended。

或者也许可以从缓存中排除 GA 并让处理 GA 请求以本机方式（GA 本机使用 XMLHttpRequest 和 withCredentials = false 选项，而不是 fetch()）。