使用 HTML img 标签时，Cloudfront 连续未命中缓存，但通过 Postman/browser 请求获得缓存命中

Question

我有一个带有 S3 源存储桶（使用 Cloudformation/SAM 委托资源）的 Cloudfront 分布，它的行为很奇怪。 S3 bucket只存储图片。

每当我通过 src 属性请求图像时，开发工具中的网络选项卡显示 Cloudfront 资源是缓存未命中（即使在反复刷新后仍然存在）。但是，当通过 Postman 或浏览器发送 GET 请求时，刷新一次后我开始看到来自相应请求发件人的缓存命中。

客户端，我使用带有样式组件的 React 作为图像标签。没有附加查询字符串，Cloudfront 也被告知忽略它们。

不确定这是我的 Cloudformation 设置问题还是服务器缓存响应的问题，但非常感谢任何指导！

我的 template.yaml 文件：

UserAssetsDistributionIdentity:
    Type: AWS::CloudFront::CloudFrontOriginAccessIdentity
    Properties:
      CloudFrontOriginAccessIdentityConfig: 
        Comment: 'Origin identity.'
  UserAssetsDistribution: 
    Type: AWS::CloudFront::Distribution
    Properties:
      DistributionConfig:
        Origins: 
          - DomainName: // Domain name removed
            Id: user-assets-bucket
            S3OriginConfig: 
              OriginAccessIdentity: !Sub 'origin-access-identity/cloudfront/${UserAssetsDistributionIdentity}'
        Enabled: 'true'
        Comment: Projects microservice to distribute user uploaded assets
        DefaultCacheBehavior: 
          AllowedMethods:
            - GET
            - HEAD
          CachedMethods: 
            - GET
            - HEAD
          CachePolicyId: b2884449-e4de-46a7-ac36-70bc7f1ddd6d
          TargetOriginId: user-assets-bucket
          ViewerProtocolPolicy: allow-all
        ViewerCertificate:
          AcmCertificateArn: // arn removed
          SslSupportMethod: sni-only
          MinimumProtocolVersion: TLSv1
        Aliases: 
          - uploads.phazia.com
  UserAssetsBucket:
    Type: AWS::S3::Bucket
    Properties: 
      AccessControl: PublicRead

Answer 1

问题是 Chrome 将 repeat-requests 的响应 header 缓存到资源。

Devtools 显示所请求资源的状态代码 200 以及一条（来自磁盘缓存的）消息 - 让我相信状态代码和响应 header 正在被缓存。尝试清除浏览器缓存并获得预期的 Cloudfront header.

使用 HTML img 标签时，Cloudfront 连续未命中缓存，但通过 Postman/browser 请求获得缓存命中

Continuous cache-misses from Cloudfront when using HTML img tag, but getting cache-hits with Postman/browser requests

amazon-s3

amazon-cloudfront

amazon-cloudformation

reactjs

styled-components