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
已提问 1 年前571 查看次数
3 回答
1
已接受的回答

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
专家
已回答 1 年前
profile picture
专家
已审核 1 年前
  • 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
专家
kentrad
已回答 1 年前
  • 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
已回答 1 年前

您未登录。 登录 发布回答。

一个好的回答可以清楚地解答问题和提供建设性反馈,并能促进提问者的职业发展。

回答问题的准则