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.

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

Relevanter Inhalt