服务工作者和其他域(aws s3)的缓存图像:“将不缓存不透明的响应”

vmarquet

我正在尝试使站点可以脱机使用,并缓存从AWS S3检索的图像。我正在使用工作箱库:

var CACHE_VERSION = '2019-02-03'

// cf https://developers.google.com/web/tools/workbox/guides/get-started
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.1/workbox-sw.js')

workbox.routing.registerRoute(
  // Cache image files
  /https:\/\/s3\.amazonaws\.com\/myproject\/img\/.*\.(?:png|jpg|jpeg|svg)/,
  // Use the cache if it's available
  workbox.strategies.cacheFirst({
    // Use a custom cache name
    cacheName: 'image-cache-' + CACHE_VERSION,
    plugins: [
      new workbox.expiration.Plugin({
        // Cache for a maximum of a week
        maxAgeSeconds: 7 * 24 * 60 * 60,
      })
    ],
  })
)

这导致控制台中的工作箱出现以下错误消息:

https://s3.amazonaws.com/myproject/img/icon.png ”的响应是不透明的响应。默认情况下,您使用的缓存策略不会缓存不透明的响应。

我已经添加了crossorigin='anonymous'这些图像属性,并且在AWS S3上具有以下CORS配置:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

我没有正确使用CORS吗?如何使响应成为正常响应而不是不透明响应?

vmarquet

好的,这是一个愚蠢的错误。我做对了,但是crossorigin="anonymous"属性设置在某些图像上,而不是其他图像上。在所有图像上正确设置它可以解决此问题。

我正在工作的网站以不同寻常的方式使用了背景图片的组合,这使得调试变得更加困难。顶部的图像正确地具有crossorigin属性,但隐藏在其下的其他图像则没有crossorigin属性,并导致一切失败,包括顶部图像的显示,该图像已在脱机模式下正确缓存。愚蠢的错误。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

服务工作者和软件预缓存的“新版本可用”

是否可以修改服务工作者缓存响应标头?

服务工作者和客户端请求“缓存控制”:“无缓存”

使Web应用程序脱机-应用程序缓存或服务工作者哪个更好?

WebView:以编程方式清除服务工作者缓存

使用CSRF令牌缓存请求时,如何减少服务工作者缓存的大小

服务工作者不会从缓存中返回文件

具有SSL证书缓存的服务工作者

PWA服务工作者缓存/更新预期行为

根据年龄删除服务工作者缓存中的条目

注销时如何清除服务工作者缓存?

延迟加载或预加载Angular模块并使用服务工作者来缓存结果?

如何根据服务工作者中的某些标志缓存响应

服务工作者可以获取和缓存跨域资产吗?

在服务工作者中服务之前,可以编辑缓存的index.html吗?

通常,服务工作者应预缓存哪些文件?

如何防止服务工作者删除缓存,PWA

如何由服务工作者更新缓存的资源

服务工作者查询缓存算法是否允许表达式匹配URL路径?

检查服务工作者缓存中是否存在URL

在服务工作者中添加图像和CSS文件以及HTML文件以进行离线缓存

服务工作者缓存文件但不离线加载

嵌套获取服务工作者中的响应

持久服务工作者和缓存 HTML 和 PNG 文件

服务工作者从磁盘缓存中缓存资源

服务工作者在反应中缓存的路由

服务工作者缓存与 VuexPersistence

角度缓存 - 我们应该使用服务工作者吗?

服务工作者缓存破坏谷歌地图 api