fetching images from Cloud Front is blocked by CORS

0

Hi. I am implementing very basic feature with NextJs and @react-three/fiber. I must use some of the "under the hood" functions to load textures, but i am getting the CORS error all the time. My images are in Cloud Front + S3 are publicly accessible and load fine from browser within "img" tag, but fetching simply does not work... i was trying to follow random tutorials ( a lot) non of "set headers" or "add policy to cloud front" worked for me... I am able to fetch this image using service like https://api.allorigins.win/raw?url=${url} , but it's something i find unnecessary as i am the owner of all the necessary technology account / repos etc.. - there must be the way to avoid third party services... Would appreciate your help very much. Thanks a lot!

Andrii
asked a year ago552 views
3 Answers
1
Accepted Answer

Hi,

One way could be to look for CloudFront signed urls or cookies to fetch the images: https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/private-content-signed-urls.html

Hope it helps ;)

profile picture
EXPERT
answered a year ago
profile picture
EXPERT
reviewed 10 months ago
  • Thank you for the help! It seems ok, but still i am wondering why can't the file that is already meant to be public have the publicity for fetch as well... it feels like unnecessary operation for hundreds of not logged in users without any subscription. Feels not right

1

How about bypassing CloudFront/CORS and used s3 presigned URLs?

profile pictureAWS
EXPERT
kentrad
answered a year ago
  • Thanks for advise, but i don't really want to expose the S3, and it seems obvious to make it work with Cloud Front only... it's a public file anyway... signing urls kind of brings it's own complexity which nobody really wants to maintain

0

Figured it out. Was nothing to do with AWS. Simple CORS workaround as "cors" for Node , but "rewrites" in next.config.ts helped to just make request to my server instead of external domain. Thanks to all the help anyway

Andrii
answered a year ago

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Guidelines for Answering Questions