Javascript 如何使用我的服务人员处理AWS s3产生的非CORS污染的浏览器缓存？

我的公司有许多应用程序请求AWS S3上的共享资源。有些应用程序使用html元素，有些则不使用。AWS不会发回CORS响应头，比如“允许访问控制源”。因此，一些用户可能会得到一个没有CORS响应头的broswer缓存版本的文件

当这些用户访问我的团队的应用程序时，服务人员可能无法请求这些共享资产，因为浏览器磁盘缓存以非cors方式拥有它们。错误如下所示：

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

请求的资源上不存在“Access Control Allow Origin”标头。因此，不允许访问源“”。如果不透明响应满足您的需要，请将请求的模式设置为“no cors”，以获取禁用cors的资源

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

我想我可以应用缓存控制请求头来绕过浏览器缓存，但是。因此，我无法向现有请求添加头。如果我尝试发出新请求，我无法从AWS获得CORS响应，因为我无法在Fetch API中进行设置

如果：

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

• 我可以让AWS总是使用CORS标题进行响应，但我不能

• 使用和原始标头发出提取请求，但我无法

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

---

我能做些什么来克服这个问题吗？现在，我正在禁用这些共享资产上的Service Worker缓存，以避免网络故障。

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

编辑-多亏了杰夫，我不必破坏浏览器缓存。当服务人员需要资产时，我可以随时通过网络访问。这就是我正在做的，它可以发出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));
}

---

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

编辑-多亏了杰夫，我不必破坏浏览器缓存。当服务人员需要资产时，我可以随时通过网络访问。这就是我正在做的，它可以发出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));
}

---

看起来我们希望更多地控制服务人员如何处理缓存，如Firefox中提供的新缓存选项，详情如下： 这是一个现有的铬问题，在这里实施

理想情况下，我们会这样做：

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

---

看起来我们希望更多地控制服务人员如何处理缓存，如Firefox中提供的新缓存选项，详情如下： 这是一个现有的铬问题，在这里实施

理想情况下，我们会这样做：

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

---

你说你的问题会解决，如果你能用一个源报头发出一个获取请求，但我不能

您应该能够通过构造自己的

请求

并显式地将设置为

“cors”

来实现这一点。下面是一个例子：

const failingRequest=新请求（'https://example.com', {
模式：“cors”
});
fetch（failingRequest）.then（console.log）.catch（console.warn）；
const successfulRequest=新请求（'https://cors-test.appspot.com/test', {
模式：“cors”
});
fetch（successfulRequest）.then（console.log）.catch（console.warn）你说如果你能用一个源标题发出一个获取请求，你的问题就会解决，但我不能

您应该能够通过构造自己的
请求
并显式地将设置为
“cors”
来实现这一点。下面是一个例子：


const failingRequest=新请求（'https://example.com', {
模式：“cors”
});
fetch（failingRequest）.then（console.log）.catch（console.warn）；
const successfulRequest=新请求（'https://cors-test.appspot.com/test', {
模式：“cors”
});
fetch（successfulRequest）.then（console.log）.catch（console.warn）
允许访问控制源站
-您的意思是
访问控制允许源站
？
在非常特定的情况下，获取API请求的header对象是不可变的
-我不明白为什么您不能设置请求头
源站是我无法在获取API中设置的禁止头站
-浏览器控制原始标题，为什么需要更改它？是的，我的意思是访问控制允许源代码。
允许访问控制源代码
-你的意思是
访问控制允许源代码
？
在非常特定的情况下，Fetch API请求的header对象是不可变的
-我不明白为什么你不能设置请求头
源代码是我认为是禁止的头无法在Fetch API中设置-浏览器控制源标题，为什么需要更改它？是的，我的意思是access-control-allow-Origin.Yep，那很好，那么我就不必与标题周围的保护抗争了。是的，那很好，那么我就不必与标题周围的保护抗争了。你知道吗，你是对的。我欺骗了自己，因为：
var r=newrequest（'https://my.server/cors-file.thing“，{mode:'cors'}）；未定义的r.headers.keys（）.next（）；Object{done:true，value:undefined}
我猜原始标头是在发出获取后添加的？我认为一般的想法是，你说你想要一个CORS请求，然后浏览器会为你解决所有细节，就像你在另一个上下文中提出CORS请求一样。你知道吗，