Αν εξυπηρετείς στατικό περιεχόμενο απευθείας από το Amazon S3 μέσω CloudFront (CDN), πιθανώς να λαμβάνεις σφάλματα σχετικά με γραμματοσειρές, εικόνες ή άλλο στατικό περιεχόμενο που πρέπει να παραδοθεί στους χρήστες σου. Στην πραγματικότητα, δεν είναι περίπλοκο. Μπορείς να διορθώσεις αυτό το ζήτημα στις ρυθμίσεις CORS του Amazon S3 Bucket σου.

Τι είναι το Amazon S3 CORS;

Cross Origin Resource Sharing (γνωστό και ως CORS). Η προδιαγραφή CORS σου δίνει τη δυνατότητα να χτίζεις web εφαρμογές που κάνουν requests σε domains διαφορετικά από αυτό που παρείχε το κύριο περιεχόμενο.

Βήμα 1: Άνοιξε τις ρυθμίσεις Permission του Bucket σου στο AWS Web Console

Επισκέψου τη σελίδα https://s3.console.aws.amazon.com και συνδέσου με τα credentials σου στην S3 κονσόλα σου και στη συνέχεια, επίλεξε το bucket σου που είναι συνδεδεμένο με το CloudFront σου.

Βήμα 2: Εφάρμοσε τη CORS Configuration

Στην καρτέλα Permissions, μπορείς να δεις την ενότητα «CORS configuration». Επίλεξε αυτή την ενότητα και εφάρμοσε τον παρακάτω κώδικα:

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>https://YOURWEBSITEADDRESS.com</AllowedOrigin>
   <AllowedMethod>PUT</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedHeader>*</AllowedHeader>
 </CORSRule>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
 </CORSRule>
</CORSConfiguration>

Μετά την επικόλληση, άλλαξε το <AllowedOrigin></AllowedOrigin> με τη διεύθυνση του website σου και κάνε κλικ στο κουμπί «Save».

Συμπέρασμα

Τέλεια! Τώρα, έχεις ρυθμίσει με επιτυχία τις CORS ρυθμίσεις σου και οι χρήστες σου μπορούν πλέον να βλέπουν το περιεχόμενό σου που βρίσκεται στο Amazon S3 Bucket σου.