Bagaimana untuk Menyelesaikan Isu Pemuatan Fon Silang Asal Firefox dengan Amazon S3 CORS?

Amazon S3 CORS dan Firefox Cross-Origin Font Loading Resolution

Kemas kini terkini dan penyelesaian yang berfungsi telah menyelesaikan isu lama dengan Firefox yang gagal memuatkan fon daripada domain selain daripada halaman web semasa. Isu ini biasanya timbul apabila fon disampaikan melalui rangkaian penghantaran kandungan (CDN).

Menggunakan Perkongsian Sumber Silang Asal (CORS) Amazon S3, masalah ini boleh diatasi dengan pendekatan berikut:

Contoh Konfigurasi CORS S3

<?xml version="1.0" encoding="UTF-8"?>
<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>

Memahami Penyelesaian

Yang disediakan Konfigurasi S3 CORS membolehkan permintaan untuk sumber fon daripada domain yang ditentukan, memberikan kebenaran pelayar untuk memuatkan fon daripada asal yang berbeza. Ia membenarkan kaedah, pengepala dan pengepala respons seperti berikut:

• AllowedMethod: Menentukan kaedah HTTP GET, yang digunakan oleh penyemak imbas untuk mengambil fon.
• MaxAgeSeconds: Menetapkan tempoh caching untuk respons kepada 3000 saat, membenarkan penyemak imbas menggunakan semula fon cache.
• AllowedHeader: Memberi kebenaran untuk penyemak imbas untuk memasukkan tajuk Kandungan-* dan Hos dalam permintaan mereka, yang diperlukan untuk pemuatan fon.

Penyelesaian Alternatif untuk Isu Caching Cloudfront

Dalam kes di mana caching Cloudfront adalah yang dihadapi, penyelesaian adalah dengan menggunakan rentetan pertanyaan untuk membezakan antara panggilan daripada domain yang berbeza:

http://hashhashhash.cloudfront.net/font.woff?https_a.domain.com

Pendekatan ini memastikan Cloudfront menyediakan pengepala Access-Control-Allow-Origin yang sesuai berdasarkan rentetan pertanyaan yang ditentukan.

Atas ialah kandungan terperinci Bagaimana untuk Menyelesaikan Isu Pemuatan Fon Silang Asal Firefox dengan Amazon S3 CORS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!