如何使用不同的 aws s3 预签名 url 使浏览器缓存相同的图像？

Question

我为我的用户生成了与此类似的 url，以便从我的 aws s3 存储桶中检索图像文件：

https://resource.my-company.com/tYERrR13341/q1/something.jpg?response-expires=Thu%2C%2008%20Nov%202018%2007%3A26%3A21%20GMT&AWSAccessKeyId=TTKIAJJ9ebJ89741rZ1888818188181818181818181818181818181818181818181811818118111811100000000000000000000000000000000极热

有时，用户可能会刷新页面，同一资源的 url 会为Expires和获取一组新值Signature。

浏览器会将这两个 url 视为不同的两个对象，并会再次尝试从 s3 存储桶下载资源。

它会导致一些性能问题。是否有可能让浏览器意识到这样一个事实：尽管 url 的参数部分存在差异，但用户正在尝试检索相同的资源并因此从其本地缓存中检索它？

Answer 1

我遇到了同样的问题，并通过缓存图像 presigned-url 链接来解决它，这将解决问题。

当您从 AWS 请求预签名 URL 时，它会返回一个带有过期和签名的链接，该链接指向存储桶中的源文件，每次刷新时：服务器会将请求传递给 AWS，然后检索新的过期和签名浏览器对签名一无所知，因此它将再次获取相同的图像。

告诉浏览器不要再次获取该信息的方法是在刷新页面时发回相同的签名！这听起来很简单，但可能会变得混乱，所以请耐心等待。

我提出的解决方案是使用“Redis”缓存层，将浏览器加载的图像映射到序列。

如果 userA 加载页面，您只需检查该页面是否已被同一用户和同一浏览器以及 MacAddress/IP 使用“序列号”访问过，您应该将其添加到浏览器的本地存储中，

序列结构 = (browser-type&name + userID + MacAddress/IP)，这是为了确保 userA 同时从不同设备和浏览器登录时可以正常工作，并确保每次 userA 加载时创建相同的序列来自此特定浏览器和设备的页面/图像。

如果 userA 没有保存到本地存储的序列号，则将其添加到本地存储，然后检查Redis 中是否存在序列号（用户可能之前登录并清除了浏览器缓存），如果是，则删除包含的附加对象图像的预签名链接作为参数：

"serial" : 
      
{ 
       
         imageID_1 : "https://s3.bucket.xxx/imageID_1.jpg?.......xyz1",

         imageID_2 : "https://s3.bucket.xxx/imageID_2.jpg?.......xyz2",

         imageID_3 : "https://s3.bucket.xxx/imageID_3.jpg?.......xyz3"

 }

然后为必须加载到页面上的每个 imageID/key 请求新的预签名 url，并将它们附加到 Redis 中的“串行”对象参数。如果没有，则只需添加“serial”+对象参数：

"serial" : 
      
{ 
       
         imageID_1 : "https://s3.bucket.xxx/imageID_1.jpg?.......abc1",

         imageID_2 : "https://s3.bucket.xxx/imageID_2.jpg?.......abc2",

         imageID_3 : "https://s3.bucket.xxx/imageID_3.jpg?.......abc3"

 }

如果浏览器将序列号缓存到本地存储中，您还必须检查每个请求，链接到序列号的对象参数中是否存在 imageID，以便为其创建 presigned-url（如果不存在），然后添加它作为对象的新参数：

"serial" : 
      
{ 
       
         imageID_1 : "https://s3.bucket.xxx/imageID_1.jpg?.......abc1",

         imageID_2 : "https://s3.bucket.xxx/imageID_2.jpg?.......abc2",

         imageID_3 : "https://s3.bucket.xxx/imageID_3.jpg?.......abc3",

         imageID_4 : "https://s3.bucket.xxx/imageID_4.jpg?.......abc4",


 }

这是为了防止用户已经将序列保存到浏览器本地存储中，告诉之前有一些加载的图像，因此我们必须检查 userA 是否正在请求之前加载的相同图像或者他正在请求新的图像。

最后，您必须检查图像是否未加载或出于任何原因禁止从浏览器访问（用于检查并向服务器报告的字体端代码），在这种情况下，您只需删除串行附加对象并附加新的presigned-urls 然后将它们发送回前端（浏览器）。