Access to image has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

Viewed 26

All I have to do is generate specific JSX and download it as pdf-file. I use react-to-pdf library and it works fine but it ignores images stored in AWS S3 bucket that are loaded fine in JSX img-component.

A full error looks like this:

Access to image at 'https://s3-eu-west-1.amazonaws.com/my-bucket/my-cool-image.png?ver=1663764527047' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Here is my Bucket policy:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::my-s3-bucket/*"
        },
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetBucketCORS",
            "Resource": "arn:aws:s3:::my-s3-bucket"
        }
    ]
}

And here is CORS settings:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "x-amz-server-side-encryption",
            "x-amz-request-id",
            "x-amz-id-2",
            "ETag",
            "Access-Control-Allow-Origin"
        ],
        "MaxAgeSeconds": 3000
    }
]

I tried different CORS and Bucket policy configurations but none of them worked as expected.

0 Answers
Related