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
posta un anno fa571 visualizzazioni
3 Risposte
1
Risposta accettata

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
ESPERTO
con risposta un anno fa
profile picture
ESPERTO
verificato un anno fa
  • 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
ESPERTO
kentrad
con risposta un anno fa
  • 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
con risposta un anno fa

Accesso non effettuato. Accedi per postare una risposta.

Una buona risposta soddisfa chiaramente la domanda, fornisce un feedback costruttivo e incoraggia la crescita professionale del richiedente.

Linee guida per rispondere alle domande