Skip to content

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!

asked 3 years ago1.1K 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 ;)

EXPERT
answered 3 years ago
EXPERT
reviewed 3 years 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?

AWS
EXPERT
answered 3 years 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

answered 3 years 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.