Chrome 无法从 service worker 中的 s3 获取 css

Question

我正在尝试让我的 Web 应用程序与服务人员一起离线工作，运行遇到一个 st运行ge 问题。

我已经为我的应用程序定义了一些 shell 文件，例如 guide on MDN

const cacheName = 'SiMo-v0.1';
const appShellFiles = [
  '/index.html',
  '/js/build/map.c6393552f9958cd32710.js',
  'https://intermaps-lynx.s3-eu-west-1.amazonaws.com/css/menu.css',
];

self.addEventListener('install', (e) => {
  console.log('[Service Worker] Install');
  e.waitUntil(
    caches.open(cacheName).then((cache) => {
      console.log('[Service Worker] Caching all: app shell and content');
      return cache.addAll(appShellFiles);
    }),
  );
});

安装该服务工作者失败，因为我从 S3 收到 css 文件的 CORS 错误。我已经确认我在存储桶上的 CORS 设置是正确的，我还在 Firefox 中测试了代码似乎可以工作的地方。

此外，我还尝试了运行 fetch('https://intermaps-lynx.s3-eu-west-1.amazonaws.com/css/menu.css') 开发者工具。在 Chrome 中失败，但在 Firefox

中也有效

编辑：
正如评论中所建议的那样，我在 post.
中包含了站点中使用的实际 CSS 文件 https://intermaps-lynx.s3-eu-west-1.amazonaws.com/css/menu.css

Answer 1

[改进]

对于 CORS
如chrome上的错误信息，在请求选项中加入{mode:'no-cors'}可以使chrome成功。

fetch('https://intermaps-lynx.s3-eu-west-1.amazonaws.com/css/menu.css', {
    mode: 'no-cors'
})

查看更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

[备注]

我获取“https://MY_BUCKET.s3-eu-west-1.amazonaws.com/css/styles.css” 即使 chrome 或 Firefox.

Answer 2

我不确定到底发生了什么变化，但我正在做一些更多的测试，突然之间来自 S3 的文件就可以正常工作了。我没有更改我的 Bucket 的任何内容，因此在 Chrome 或 S3 方面有一个修复。

无论如何感谢所有试图提供帮助的人

Chrome 无法从 service worker 中的 s3 获取 css

Chrome unable to fetch css from s3 in service worker

javascript

google-chrome

amazon-s3

service-worker