Mengatur Access-Control-Allow-Origin pada Objek Cache Cloudfront

Font yang disajikan melalui Cloudfront rusak di Firefox karena "masalah URI buruk atau akses lintas situs tidak diizinkan". Untuk memperbaikinya, saya memahami bahwa saya perlu menyetel header "Access-Control-Allow-Origin" ke wildcard atau domain sumber.

Masalah yang saya alami adalah Cloudfront sepertinya tidak menerima header dari asal.

Misalnya, berikut adalah daftar header yang saya dapatkan ketika saya melakukan ping ke server saya untuk font tersebut:

curl -I -s "https://mysite.com/wp-content/themes/my-theme/includes/fonts/ProximaNova-Reg-webfont.ttf"
HTTP/1.1 200 OK
Server: nginx
Date: Wed, 29 Jan 2014 16:03:03 GMT
Content-Type: application/x-font-ttf
Content-Length: 44992
Last-Modified: Tue, 28 Jan 2014 22:21:41 GMT
Connection: keep-alive
ETag: "52e82d75-afc0"
Expires: Thu, 29 Jan 2015 16:03:03 GMT
Cache-Control: max-age=31536000
Access-Control-Allow-Origin: https://mysite.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3600
Accept-Ranges: bytes

Semuanya terlihat baik dengan respons ini; namun, ketika saya melakukan ping ke Cloudfront untuk sumber daya yang sama, saya mendapatkan:

curl -I -s "https://ds6dj5kp03o39.cloudfront.net/wp-content/themes/my-theme/includes/fonts/ProximaNova-Reg-webfont.ttf"
HTTP/1.1 200 OK
Content-Type: text/plain
Content-Length: 44992
Connection: keep-alive
Date: Wed, 29 Jan 2014 16:22:30 GMT
Server: Apache/2.2.16 (Debian) mod_ssl/2.2.16 OpenSSL/0.9.8o
Last-Modified: Wed, 22 Jan 2014 02:44:45 GMT
ETag: "5d633-afc0-4f0861b87a140"
Accept-Ranges: bytes
Cache-Control: max-age=3600
Expires: Wed, 29 Jan 2014 17:22:30 GMT
X-Cache: Miss from cloudfront
Via: 1.1 850e11212c3f83bfb138469e9b3b7718.cloudfront.net (CloudFront)
X-Amz-Cf-Id: M4qkj9FwjdAUW91U4WeZzxEI0m7vOmiQvryS55WwoeU5Ks11IC71ig==

Tampaknya semua header asal diabaikan sepenuhnya. Pertanyaan saya adalah, bagaimana cara agar Cloudfront menerima header aset saya, terutama header penting "Access-Control-Allow-Origin"?

Terima kasih untuk bantuannya!


cors cdn amazon-cloudfront
person tollmanz    schedule 29.01.2014    source sumber
comment
Hai, saya masih tidak mengerti bagaimana pertanyaan terkait dijawab dengan: setel header di server Anda. Pemikiran saya adalah, Anda harus mengatur header pada server yang Anda sambungkan. Bagus karena seseorang tidak dapat memberi suara negatif pada komentar, karena saya pasti sangat bodoh di sini.   -  person loveNoHate    schedule 29.01.2014
comment
Ya...ini mungkin masalah saya juga ;) Menurut saya apa yang seharusnya terjadi adalah beberapa header yang Anda atur di server Anda dipertahankan oleh CloudFront. Mereka jelas akan mengesampingkan beberapa di antaranya, tapi saya pikir mereka akan mempertahankan beberapa di antaranya. Banyak orang telah menulis artikel tentang metode ini, tetapi bagi saya tidak berhasil. Mungkin anggapan ini salah besar.   -  person tollmanz    schedule 29.01.2014
comment
Apakah itu berhasil: docs.aws.amazon.com/AmazonS3/latest/ dev/cors.html ?   -  person loveNoHate    schedule 30.01.2014

Jawaban (4)


arrow_upward
17
arrow_downward

Jika Anda mengalami hal ini di kemudian hari, dan mengalami masalah dengan asal khusus yang sudah menyajikan header Access-Control-Allow-Origin dengan benar, inilah dua hal yang saya periksa/coba:

  1. Periksa apakah konfigurasi nginx atau Apache Anda memiliki * dalam tanda kutip, jika ya, coba hapus.
  2. Pastikan Anda meneruskan tipe konten yang benar untuk file woff dan ttf. Ini adalah tautan tercepat yang saya temukan mengenai subjek ini - https://github.com/fontello/fontello/wiki/How-to-setup-server-to-serve-fonts

Apache

Untuk menyetel tipe mime yang tepat untuk file font, tambahkan baris ini ke konfigurasi:

AddType application/vnd.ms-fontobject    .eot
AddType application/x-font-ttf           .ttf
AddType application/font-woff            .woff

Jika Anda tidak dapat mengedit konfigurasi, buat file .htaccess di folder dengan proyek Anda dan tambahkan baris di sana.

Untuk header CORS tambahkan kode di bawah ini:

<FilesMatch ".(eot|ttf|otf|woff)">
  Header set Access-Control-Allow-Origin "*"
</FilesMatch>

Anda harus menjalankan service apache2 restart setelah Anda melakukan perubahan ini dan jika Anda menerima kesalahan Invalid command 'Header' maka itu berarti Anda belum mengaktifkan modul mod_header di Apache yang dapat Anda lakukan dengan a2enmod headers

nginx

Secara default nginx tidak memiliki tipe mime default untuk font, dan tipe mimy yang salah untuk file .eot. Masuk ke folder dengan konfigurasi dan temukan di mana tipe mime dikotori. Biasanya, itu ada di file mimes.conf.

Cari .eot dan string dengan itu. Tambahkan string di bawah ini:

application/vnd.ms-fontobject    eot;
application/x-font-ttf           ttf;
application/font-woff            woff;

Untuk header CORS, tambahkan sesuatu seperti ini ke konfigurasi vhost Anda

location ~* \.(eot|ttf|woff)$ {
    add_header Access-Control-Allow-Origin *;
}
person streetlogics    schedule 30.07.2014

arrow_upward
7
arrow_downward

Dalam konfigurasi defaultnya, CloudFront tidak memeriksa header atau menyimpan cache nilainya. Kemungkinan penyebab Anda adalah sumber daya Anda pertama kali diminta tanpa header "Origin", dan karenanya S3 tidak menyajikan header CORS sebagai respons. Responsnya di-cache dan ketika nanti Anda membuat permintaan lintas asal, respons yang di-cache akan disajikan tanpa permintaan tersebut.

Anda dapat mengonfigurasi CloudFront untuk meneruskan header Origin ke S3 dan meng-cache respons yang berbeda untuk nilai header yang berbeda, yang akan mengakibatkan CloudFront melakukan cache header CORS bila diperlukan. Lihat http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/header-caching.html#header-caching-web-cors.

person Alex North    schedule 24.11.2014

arrow_upward
6
arrow_downward

Apa yang Anda lakukan benar, tetapi CloudFront menyimpan hasilnya dalam cache, sehingga Anda mendapatkan versi cache yang lama. Anda dapat melihatnya di header: dari situs Anda:

Terakhir Dimodifikasi: Sel, 28 Jan 2014 22:21:41 GMT

dari tepi awan:

Terakhir Dimodifikasi: Rabu, 22 Jan 2014 02:44:45 GMT

Sekarang, bagaimana cara membuatnya berfungsi kembali:

a) tunggu sampai barang tersebut habis masa berlakunya, lalu minta lagi. CloudFront akan memperbaruinya.

b) Batalkan validasi objek menggunakan amazon aws console > cloudfront > distribution > Invalidations. Lihat http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Invalidation.html untuk detail tentang cara menggunakan ini

c) mengubah nama atau mulai menggunakan nama berversi untuk file tersebut, mis. ProximaNova-Reg-webfont_2.ttf

person Paulo Cunha    schedule 17.03.2014
comment
Aku menjadi gila dalam hal ini. S3 menyetel header Access-Control-Allow-Origin ke * dan melalui permintaan cloudfront, header tersebut tidak disetel. Setelah membaca ini saya mengunggah file baru dan headernya sekarang sudah disetel :) masuk akal. Terima kasih! - person mwm; 23.01.2015

arrow_upward
3
arrow_downward

Terdapat konfigurasi eksplisit pada bucket Anda untuk mengevaluasi header CoRS secara dinamis.

  1. Lihat dokumen AWS CORS
  2. Juga penjelasan mendetail tentang penggunaannya

Mencoba menyetel header CORS atau sebaliknya untuk CF atau S3 akan dibuang karena akan merusak model cachingnya.

person Joseph Lust    schedule 17.08.2014