Wenn du statische Inhalte direkt uber Amazon S3 via CloudFront (CDN) bereitstellst, erhaltst du wahrscheinlich einen Fehler bezuglich Schriftarten, Bildern oder anderen statischen Inhalten, die fur deine Nutzer ausgeliefert werden sollen. Eigentlich ist es nicht kompliziert. Du kannst dieses Problem in den CORS-Einstellungen deines Amazon S3 Buckets beheben.

Was ist Amazon S3 CORS?

Cross Origin Resource Sharing (alias CORS). Die CORS-Spezifikation gibt dir die Moglichkeit, Webanwendungen zu erstellen, die Anfragen an andere Domains als diejenige stellen, die den primaren Inhalt bereitgestellt hat.

Schritt 1: Offne die Bucket-Berechtigungseinstellungen in der AWS Web Console

Besuche die Seite https://s3.console.aws.amazon.com und melde dich mit deinen Anmeldedaten bei deiner S3-Konsole an. Wahle dann den Bucket aus, der mit deinem CloudFront verbunden ist.

Schritt 2: CORS-Konfiguration anwenden

Im Tab "Berechtigungen" siehst du den Abschnitt "CORS-Konfiguration". Wahle diesen Abschnitt aus und wende den folgenden Code an:

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

Andere nach dem Einfugen den <AllowedOrigin></AllowedOrigin> mit deiner Website-Adresse und klicke auf die Schaltflache "Speichern".

Fazit

Hurra! Du hast jetzt erfolgreich deine CORS-Einstellungen konfiguriert und deine Nutzer konnen nun die Inhalte anzeigen, die sich in deinem Amazon S3 Bucket befinden.