Unable to fetch images from cloudfront cdn using fetch API in the browser

Question

I keep getting TypeError: Failed to fetch when using fetch API to get images from my cloudfront cdn. A sample URL that demonstrates this problem is https://cdn.dev.textras.com/videos/thumbnails/614fc78597910a00134de449/073be298-4ee4-4521-94fb-f7e0b131d999/screenshot-1.jpg?w=320&q=100&token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYxNTkwNDMwODA3NDUzMDAxM2Y4ZTY1YyIsImNvdW50cnlDb2RlIjoiTkdBIiwiaWF0IjoxNjQyMDAzNzUyLCJleHAiOjE2NDIyNjI5NTJ9.mZ8TPa-OQOfpCWPXYYKPQvFyEA-UigpLs13vhQGuuME . If you use that url as the src for an <img> tag, the image loads. If you visit the URL in a browser tab, the image loads. If you open dev tools within that same tab and then do a fetch request to get the image (ie same origin), the fetch request succeeds. If you request the image using postman or curl from the terminal, the request succeeds. However if you're in a browser tab with a domain different from my cdn (ie cross origin), it doesn't load. This seems like a classic CORS problem. This is a snippet from the template that defines the behavior of the cloudfront distribution. I'm only including the part that defines the behavior that affects this particular image:

...
  CloudFrontDistribution:
    Type: AWS::CloudFront::Distribution
    Properties:
      DistributionConfig: 
        Aliases: !Ref AliasesParam
        Comment: !Ref Comment
        CacheBehaviors:
          - AllowedMethods: "DELETE,GET,HEAD,OPTIONS,PATCH,POST,PUT"
            CachedMethods: "GET,HEAD,OPTIONS"
            Compress: false
            PathPattern: 'videos/thumbnails/*'
            DefaultTTL: "1814400"
            ForwardedValues:
              QueryString: true
              QueryStringCacheKeys:
                - w
                - h
                - t 
                - q
                - v
            LambdaFunctionAssociations:
              - EventType: 'viewer-request'
                LambdaFunctionARN: !Ref ViewerRequestFunctionVersionArn
              - EventType: 'origin-request'
                LambdaFunctionARN: !Ref LambdaVideoPathEdgeVersionArn
              - EventType: 'origin-response'
                LambdaFunctionARN: !Ref OringResponseFunctionVersionArn
            MaxTTL: 31536000
            MinTTL: 0
            SmoothStreaming: false
            TargetOriginId: !Ref IdParam
            ViewerProtocolPolicy : "redirect-to-https"
            # TrustedSigners:
            #   - String

The template doesn't specify a response header policy, so I tried setting one of the managed CORS policies directly from the cloudfront dashboard. I tried both the SimpleCORS and CORS-with-preflight-and-SecurityHeadersPolicy (ie the 2 ends of the spectrum for the managed policies), but the problem persisted.

I've also reviewed this list of possible reasons for TypeError , and I think it can only be due to the response because the requests works except when I'm requesting from a browser tab with a different origin domain.

Any ideas as to what the problem could be? Thanks!

Answer 1

You might have to enable the OPTIONS method for HTTP requests. This is required after you enable CORS properly. Follow this blog for more details: https://aws.amazon.com/premiumsupport/knowledge-center/no-access-control-allow-origin-error/