如何通过Service Worker处理AWS s3导致的非CORS污染的浏览器缓存？

Question

我的公司有许多应用程序要求使用AWS S3上的共享资源。 这些应用程序中有一些使用crossorigin =“ anonymous” html元素，而有些则没有。 当没有Origin请求标头时 ，AWS不发回CORS响应标头，如“ Allow-access-control-origin”。 因此，某些用户可以使用没有CORS响应标头的文件的浏览器缓存版本结束。

当这些用户访问我团队的应用程序时，Service Worker可能无法请求这些共享资产，因为浏览器磁盘缓存以非核心方式存储它们。 错误看起来像这样：

所请求的资源上没有“ Access-Control-Allow-Origin”标头。 因此，不允许访问源' http：// localhost：8001 '。 如果不透明的响应满足您的需求，请将请求的模式设置为“ no-cors”，以在禁用CORS的情况下获取资源。

当然，我不能使用不透明的响应进行可靠的缓存。

我以为可以套用缓存控制请求标头来绕过浏览器缓存，但是Fetch API Request的Headers对象是不可变的 。 因此，我无法将标头添加到现有请求。 如果尝试发出新请求，则无法从AWS返回CORS响应，因为Origin是我无法在Fetch API中设置的禁止标头 。

如果出现以下情况，将解决此问题：

• 我可以强制公司中的所有团队确保他们使用crossorigin html属性，但是我不能。

• 我可以使AWS始终以CORS标头响应，但我不能。

• 使用“ Origin”报头和“ Origin”报头发出“提取请求”，但是我做不到。

• 说服我的组织设置不允许浏览器缓存资产的缓存控制标头，但这不是一个好主意。

有什么我可以克服的吗？ 现在，我只是禁用这些共享资产上的Service Worker缓存，以避免网络故障。

Answer 1

您说如果可以使用Origin头发出Fetch Request的问题就可以解决，但是我不能。

您应该能够通过构造自己的Request并将其mode显式设置为'cors'来做到这'cors' 。 这是一个例子：

 const failingRequest = new Request('https://example.com', { mode: 'cors' }); fetch(failingRequest).then(console.log).catch(console.warn); const successfulRequest = new Request('https://cors-test.appspot.com/test', { mode: 'cors' }); fetch(successfulRequest).then(console.log).catch(console.warn); 

您应该看到对https://example.com和https://cors-test.appspot.com/test都发出了启用CORS的请求。 第一个请求将失败，因为服务器不支持CORS，而第二个请求将成功并使用不透明的Response对象进行解析。

Answer 2

看起来我们希望对服务工作人员如何处理缓存进行更多控制，例如Firefox中提供的新缓存选项，详情如下： https : //hacks.mozilla.org/2016/03/referrer-and-cache-control-apis- for-fetch /这是现有的Chromium问题，可在此处实现https://bugs.chromium.org/p/chromium/issues/detail?id=453190

理想情况下，我们将执行以下操作：

  // Download a resource with cache busting, to bypass the cache
  // completely.
  fetch("some.json", {cache: "no-store"}) // or "reload"
    .then(function(response) { /* consume the response */ });

Answer 3

我想我只是让我的应用程序使用特定于我的应用程序的查询字符串来请求所有这些共享资产。 感觉不对，但应该可以。

编辑-感谢Jeff，我不必做浏览器缓存破坏。 当服务人员需要资产时，我总是可以通过网络访问。 这就是我正在做的事情，它可以发出CORS请求，从而避免浏览器磁盘缓存：

function respondWithCacheOrNetwork(event) {
  var headers = new Headers();
  event.request.headers.forEach((v, k) => { headers.set(k, v); });
  // Copy the old headers, cannot modify because immutable
  headers.set('cache-control', 'no-cache');
  var skipBrowserCacheRequest = new Request(event.request.url,
    {
      mode: 'cors',
      method: event.request.method,
      headers: headers
    }
  );
    event.respondWith(toolbox.cacheFirst(skipBrowserCacheRequest));
}