I'm trying to set up an AWS S3 bucket for secure image handling on my website. Users should be able to upload, view, and print images. The bucket's public access is blocked to prevent direct access to the object URLs.
Current Setup:
Bucket Policy:
{
"Version": "2012-10-17",
"Id": "PolicyForWebsiteAccess",
"Statement": [
{
"Sid": "AllowWebsiteAccessForViewing",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::mybucket/*",
"Condition": {
"StringLike": {
"aws:Referer": [
"https://example.com/*",
"https://example.com"
]
}
}
},
{
"Sid": "AllowWebsiteAccessForUploads",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:PutObject",
"Resource": "arn:aws:s3:::mybucket/*",
"Condition": {
"StringLike": {
"aws:Referer": [
"https://example.com/*",
"https://example.com"
]
}
}
}
]
}
CORS configuration :
[
{
"AllowedHeaders": ["*"],
"AllowedMethods": ["GET", "HEAD", "POST", "PUT"],
"AllowedOrigins": ["https://example.com"],
"ExposeHeaders": ["ETag"],
"MaxAgeSeconds": 3000
}
]
Issue:
When users view images on the website, everything functions correctly. However, when trying to print these images, the browser console shows a CORS error:
Access to image at 'https://mybucket.s3.ap-south-1.amazonaws.com/test/user-001/testimage.jpg' from origin 'https://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Goal:
I want users to:
Upload images through the website.
View and print these images while ensuring the S3 bucket's public access is blocked
yes the error still persist
How about adding "Access-Control-Allow-Origin" to "ExposeHeaders" and forcing it to be included in the response? Specifically, why not try changing the CORS policy as follows?
NO! i just tried adding this above cors configuration and it still gives me same error Access to image at 'https://mybucket.s3.ap-south-1.amazonaws.com/test/user-001/Logo.png' from origin 'https://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
GET https://mybucket.s3.ap-south-1.amazonaws.com/test/user-001/Logo.png net::ERR_FAILED
#1 353ms Error loading image https://mybucket.s3.ap-south-1.amazonaws.com/test/user-001/Logo-001/Common-Logo.png
and after i press print button print pdf that opens in new window no images are present
Is it no good to use "*" as shown below? Also, did you clear your browser cache after changing the CORS policy?