Cloudfront signed Image urls from s3 throw CORS error

Question

I am using cloudfront infront of my s3 bucket, and grabbing images from the bucket via signed urls. The urls work with no issues and I can download the images from my browser. However when i try to use the image within my webapp I am returned with the following cors error:

Access to fetch at 'https://dfoxzc4f0kaps.cloudfront.net/myuserid/2023-12-20T15:41:23.169Z?Expires=1703090500&Signature=r4ahRqzdav6JZTx4h9BOiEJdK8IpGiTJNaYEWVnJExm-~HrxkgZzHaSl0MK8G5pebNJZjCwr2AKInvXHahdcVeJ2ovZXBJjLrvPxQ1x-wFwlg4m34TZIfdtqyGf2YmoHiWfdiS-rfPcs6-Nvf4rCx9wawhqXfYEnGfH32GKoYKMRVCf0j4cEQW7H2uNCIB5mba7N6MPKwJwTmf0VTO3TXOPJFMOWx72nl5oScvCpZt0qW~jYs-uEHHIedPBLHZFezNbNg1t0DMO0hdeRqAQrUt2PvynDyt22l5wpBzNpya3ZHozVEX2sNuLvzw5X5eNUeFEUOLgp0nj-TgKVOjkZlQ__&Key-Pair-Id=K2VR8ZG1GJTSTL' from origin 'https://app.dev.mysite.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I have the following cors policy on my s3 bucket:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD",
            "PUT",
            "POST"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

I cannot see what the problem is, any advice would be appreciated!
Thanks in advance.

Manas · Answer

You can try to make sure that CloudFront is configured to forward the below CORS headers from request to the S3 bucket as outlined in the [document](https://repost.aws/knowledge-center/no-access-control-allow-origin-error).

* Access-Control-Request-Headers
* Access-Control-Request-Method
* Origin

Cloudfront signed Image urls from s3 throw CORS error

Relevant content