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

Question

我遇到了这个错误，我不知道如何修复 it.The 网站已经上线，因此我不想测试很多东西，在测试中破坏它。我想问题出在我的 web.config 文件中，它与我用来缓存文件的服务工作者有关，因为它正在使用“获取”。

我收到错误。

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要求。

GA 响应不想被缓存（绿色下划线）。所有的统计传输都在发送请求中完成，答案只是确认发送（文本如1gfr）。
GA 不接受带有凭据（红色下划线）的请求，因为：
- 通配符的呈现 * in Access-Control-Allow-Origin 响应 header
- 缺少 Access-Control-Allow-Credentials: true 作为响应 header

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

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

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

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

SOLVED-How do I fix error with access control in web.config file?

web-config

access-control