Mengatur Akses-Kontrol-Bolehkan-Asal di Cloudfront

Saya mengalami masalah dalam melayani aset statis ke Firefox menggunakan AWS Cloudfront.

Chrome berfungsi sempurna, tetapi Firefox mengembalikan kesalahan CORS.

Jika saya menjalankan curl, saya mendapatkan:

HTTP/1.1 200 OK
Content-Type: application/x-font-opentype
Content-Length: 39420
Connection: keep-alive
Date: Mon, 11 Aug 2014 21:53:50 GMT
Cache-Control: public, max-age=31557600
Expires: Sun, 09 Aug 2015 01:28:02 GMT
Last-Modified: Fri, 08 Aug 2014 19:28:05 GMT
ETag: "9df744bdf9372cf4cff87bb3e2d68fc8"
Accept-Ranges: bytes
Server: AmazonS3
Age: 2743
X-Cache: Hit from cloudfront
Via: 1.1 c445b20dfbf3128d810e975e5d84e2cd.cloudfront.net (CloudFront)
X-Amz-Cf-Id: ...

Yang saya pikir perlu tajuk:

Access-Control-Allow-Origin: *

Ada yang bisa bantu saya? Mengapa masalah di Firefox dan bukan Chrome? Bagaimana saya bisa menyelesaikannya?

Hal pertama, Anda perlu memastikan bahwa Anda kepala header daftar putih:

Jika Anda ingin CloudFront menghormati pengaturan berbagi sumber daya asal, konfigurasikan CloudFront untuk meneruskan header Asal ke asal Anda.

http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/RequestAndResponseBehaviorCustomOrigin.html#request-custom-cors

Juga lihat: http://aws.amazon.com/blogs/aws/enhanced-cloudfront-customization/

Omong-omong, ada beberapa pertanyaan serupa pada serverfault / stackoverflow dan banyak jawaban.

Ini sedikit lebih rumit daripada jawaban yang diterima menunjukkan.

Dukungan CORS saat menggunakan Cloudfront + S3 sebenarnya diimplementasikan dalam S3 dan berfungsi seperti ini menurut Amazon:

Header Asal permintaan harus cocok dengan elemen DiizinkanOrigin.

Metode permintaan (misalnya, DAPATKAN atau PUT) atau header Metode-Akses-Kontrol Permintaan jika permintaan PILIHAN prelight harus menjadi salah satu elemen Diizinkan Metode.

Setiap tajuk yang tercantum dalam tajuk Akses-Kontrol-Permintaan-Tajuk pada permintaan preflight harus cocok dengan elemen AllowHeader.

Ini masuk akal, yang mungkin tidak jelas adalah bahwa jika tidak ada header Asal dikirim oleh klien, maka pemrosesan ini tidak dilakukan sama sekali. Dan kami menggunakan Cloudfront di depan yang, jika Anda hanya meng-host aset statis, Anda mungkin mengaturnya untuk mengabaikan semua header saat melakukan caching. Oleh karena itu jika permintaan pertama untuk setiap file dari node tepi tertentu tidak termasuk header Origin, itu akan men-cache respon tanpa header Access-Control-Allow-Origin.

Hasilnya adalah bahwa permintaan masuk pertama akan menentukan header mana yang dikembalikan untuk semua permintaan sampai cache berakhir.

Ada beberapa cara untuk memperbaikinya.

• Setup cloudfront untuk melakukan caching bersyarat berdasarkan header "Asal".

Ini berfungsi dengan baik jika Anda hanya mengharapkan beberapa atau satu asal saja, tetapi sebaliknya rasio cache Anda bisa menjadi sangat buruk.

• Gunakan Lambda @ edge untuk mengatur header secara paksa, ini bisa dilakukan hanya sekali untuk setiap permintaan asal (S3).

Sepenuhnya fleksibel, tetapi menambah overhead dan biaya.

• Buat cloudfront menimpa tajuk "Asal" ke nilai dummy untuk setiap permintaan.

Ini hanya benar-benar berguna dalam kasus "Access-Control-Allow-Origin: *" dan ini sedikit meretas, tetapi ini mungkin solusi terbaik saat ini ketika hosting aset statis di cloudfront + S3.