存储在 Azure Blob 中的图像不会缓存在浏览器中

Posted 2023-03-22

【中文标题】存储在 Azure Blob 中的图像不会缓存在浏览器中

【英文标题】：Images stored in Azure Blob don't cache in Browser

【发布时间】：2021-02-01 10:14:32

【问题描述】：

上传时我已将缓存属性设置为“max-age=3600, must-revalidate”。查看浏览器开发工具，网络选项卡，我可以看到标题是正确的，并且缓存属性已设置。 但是每次都会从 Azure blob 存储中获取照片，并得到 200OK 响应。

我上传的方式如下： - 用户上传的照片 -GUID 添加到照片名称并与用户信息一起保存到 Azure SQL 数据库。 -在 C# 中使用 Azure 库创建的 Blob 参考 -上传后设置缓存属性并保存

    var uniqueFileName = Guid.NewGuid().ToString() + "_" + fileName;
    var newBlob = container.GetBlockBlobReference(uniqueFileName);
    using var fileStream = file.OpenReadStream();
    newBlob.UploadFromStreamAsync(fileStream).Wait();
    newBlob.Properties.CacheControl = "max-age=3600, must-revalidate";
    newBlob.SetPropertiesAsync().Wait();

使用 URI + SAS 令牌获取 Blob 我从 SQL 数据库中获取名称，在 azure Blob 中查找它，然后获取 URI 并添加 SAS 以使客户端可以访问 Blob。

var blob = container.GetBlockBlobReference(fileName);
                var sasToken = blob.GetSharedAccessSignature(new SharedAccessBlobPolicy()
                
                    Permissions = SharedAccessBlobPermissions.Read,
                    SharedAccessExpiryTime = DateTime.UtcNow.AddHours(1)
                );
                var blobUrl = blob.Uri.AbsoluteUri + sasToken;

我发现每次创建新的 SAS 时，图像都会被视为新版本。我确实为每个请求创建了一个新的 SAS，以创建客户端用来下载图像的链接。我怎样才能绕过这种行为。我是否应该在不使用 SAS 的情况下让公众可以访问容器以供读取？

【参考方案1】：

如果使用带有 SAS 令牌的 blob，cache control 应该可以工作。

如果您使用浏览器（如 Chrome）访问带有 SAS 令牌的 blob，请确保您不要在开发工具中选中“禁用缓存”复选框。我可以看到它在我身边使用缓存，截图如下：

【讨论】：

我当然做到了！我可以看到缓存控件已保存。还是行不通。我也有“在 Rezor 页面上将附加版本设置为 true”

一件事可能会给出提示！每次发出获取映像的新请求时，都会创建并添加一个新的 SAS。我在 Razor 页面中有 asp-append-version="true" 。我怀疑有些错过了这个食谱的版本控制。我会测试更多，但我想与你分享。可能你有个主意。

@Giss，如果添加 asp-append-version="true"，则不同 sastoken 的 blob url 应该被视为不同的版本。这可能是根本原因。

好的，事情就是这样。如果更改了 SAS 令牌，则将其视为新版本，这是我发现的。但我使用 SAS 创建指向 blob 的链接，以便将其直接下载到客户端。但随后每次请求都会创建一个新的 SAS，因此缓存失败。除非每个请求都与客户端一起使用相同的 SAS 令牌。我当然可以流式读取 blob 并将其与请求一起发送。但这听起来并不空闲。那么解决方法是什么？

我会检查的！感谢您的帮助！