Bagaimana untuk Mengkonfigurasi Amazon S3 CORS untuk Memuatkan Fon Merentas Domain dalam Firefox?

Amazon S3 CORS dan Firefox's Cross-Domain Font Loading

Firefox menghadapi kerumitan dalam memuatkan fon daripada asal selain daripada halaman web semasa, terutamanya apabila fon berada pada CDN. Untuk menangani isu ini, pelbagai penyelesaian telah dicadangkan, antaranya pelaksanaan Amazon S3 CORS (Cross-Origin Resource Sharing).

S3 CORS Configuration

Untuk membolehkan pemuatan fon merentas domain melalui S3 CORS, anda mesti mengkonfigurasi Amazon S3 seperti berikut:

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>https://mydomain.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Content-*</AllowedHeader>
        <AllowedHeader>Host</AllowedHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>https://*.mydomain.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Content-*</AllowedHeader>
        <AllowedHeader>Host</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Ini konfigurasi:

• Membenarkan permintaan daripada asal yang ditentukan (mydomain.com dan subdomainnya).
• Menghadkan permintaan kepada kaedah GET, yang digunakan untuk mengambil fon.
• Menentukan masa caching selama 3000 saat, mengurangkan beban pada pelayan.
• Membenarkan pengepala khusus yang diperlukan untuk mendapatkan semula fon (Jenis Kandungan dan Hos).

Isu Caching Cloudfront

Sesetengah pengguna mungkin menghadapi masalah dengan penyimpanan Cloudfront Pengepala Access-Control-Allow-Origin, menghalang pemuatan fon merentas domain. Untuk memintas ini, gunakan rentetan pertanyaan untuk membezakan antara permintaan daripada domain yang berbeza. Contohnya:

<pre class="brush:php;toolbar:false">curl -i -H "Origin: https://a.domain.com" http://hashhashhash.cloudfront.net/font.woff?https_a.domain.com

Dalam contoh ini, rentetan pertanyaan "?https_a.domain.com" secara unik mengenal pasti permintaan daripada domain "a.domain.com." Cloudfront kemudiannya akan mengembalikan pengepala Access-Control-Allow-Origin tersuai untuk setiap domain.

Atas ialah kandungan terperinci Bagaimana untuk Mengkonfigurasi Amazon S3 CORS untuk Memuatkan Fon Merentas Domain dalam Firefox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!