Javascript Chrome无法从服务工作者中的s3获取css

我试图让我的web应用程序与服务人员脱机工作，但遇到了一个奇怪的问题

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

const cacheName='SiMo-v0.1'；
常量appShellFiles=[
“/index.html”，
“/js/build/map.c639352f9958cd32710.js”，
'https://intermaps-lynx.s3-eu-west-1.amazonaws.com/css/menu.css',
];
self.addEventListener（'install'，（e）=>{
log（“[Service Worker]安装”）；
e、 等到(
caches.open（cacheName）。然后（（cache）=>{
log（“[Service Worker]缓存所有：应用程序外壳和内容”）；
返回cache.addAll（appShellFiles）；
}),
);
});

安装该服务工作者失败，因为我从S3中得到了css文件的CORS错误。我已经确认了我在bucket上的CORS设置是正确的，并且在Firefox中进行了测试，代码似乎可以正常工作

此外，我还尝试运行

fetch（'https://intermaps-lynx.s3-eu-west-1.amazonaws.com/css/menu.css）

来自开发人员工具。它在Chrome中失败，但在Firefox中也能正常工作

编辑：
正如评论中所建议的那样，我在帖子中包含了一个在网站中实际使用的CSS文件。

---

[改进]

用于CORS
正如chrome上显示的错误消息，在请求选项中添加{mode:'no cors}可以使chrome成功

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

请参阅更多信息：

[备注]

• 我去拿“ 即使是chrome或Firefox，也会始终做出响应

---

我不确定到底发生了什么变化，但我正在做更多的测试，突然之间S3中的文件就正常工作了。我没有改变我的水桶的任何东西，所以在Chrome或S3的侧面有一个补丁

---

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

我建议首先将url共享到您的css文件，很难做出这样的判断，假设您使用的是新的firefox版本，并且没有禁用cors安全性，那么如果chrome中的获取因cors而失败，那么它在Firefox上也会失败。您是否将js和css存储在同一位置？我想您需要为您的JS主机配置CORS，而不是css。@ehab我在文章中包含了一个在站点中使用的实际css文件。我使用最新的firefox，在设置中没有禁用任何东西。我只允许我的本地服务器使用没有https的serviceworkershost@OleksandrBlyzniuk只有很少更改的css文件位于S3上，JS与站点的其余部分位于同一主机上。我不知道你为我的JS主机配置CORS是什么意思。它适用于我主机上的JS，而不适用于我主机上的CSSS3@Eschon此处的css文件未配置为从跨源获取，为了确保可以从跨源访问文件，您必须将“访问控制允许源”=“*”添加到pwa将使用的每个文件的响应头中（除非其源相同）感谢您的回答，没有cors确实使提取请求成功。但是，获取请求仅作为对文件的测试。cache.addAll无法获取该文件，这无助于解决此问题。您备注中的url不是真实的url。在我编辑我的帖子之前，我已经用它代替了我的实际url。我不确定这对我的情况有什么作用？防止缓存的技术将如何帮助我的ServiceWorker缓存文件？您是否在PC上使用chrome打开PWA？您是否在chrome上启用“桌面PWAs本地更新”？或者可能是清单问题……您是否可以提供更多的高级信息，例如Github或完整的演示代码？我在Mac上使用Chrome。该网站还不能安装，我没有清单，我只添加了一个ServiceWorker，可以解决S3上CSS文件的问题。我可以在本周晚些时候在Github上设置一个演示，与大家分享