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

Question

我试图让我的网络应用程序与服务人员离线工作，但遇到了一个奇怪的问题。
我已经为我的应用程序定义了一些 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 中也有效
编辑:
正如评论中所建议的，我在帖子中包含了网站中使用的实际 CSS 文件。
https://intermaps-lynx.s3-eu-west-1.amazonaws.com/css/menu.css

Answer 1

【改进】

对于 CORS
正如 chrome 上显示的错误信息，在 request 选项中添加 { 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 '
总是会响应 301 甚至 chrome 或 Firefox。