Bagaimanakah Saya Boleh Membetulkan Isu Pemuatan Fon Merentas Domain Firefox dengan Amazon S3 CORS?

Amazon S3 CORS dan Firefox Cross-Domain Font Loading: Menyelesaikan Isu Pemuatan Fon

Firefox telah diketahui menghadapi masalah memuatkan fon dari asal yang berbeza daripada halaman web semasa , terutamanya apabila fon dihoskan pada CDN. Masalah ini telah dibincangkan secara meluas dalam forum dalam talian, termasuk yang disebut.

Untuk menangani cabaran ini, Amazon S3 CORS (Cross-Origin Resource Sharing) menawarkan penyelesaian yang berpotensi. CORS membenarkan pelayan menentukan sumber yang boleh diakses daripada domain lain, dengan itu mengurangkan sekatan keselamatan merentas domain.

Untuk mengkonfigurasi CORS untuk S3, dokumen XML mesti dimuat naik ke baldi yang mengandungi fon. Konfigurasi berikut disyorkan:

<?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>

Konfigurasi ini membenarkan:

• DAPATKAN permintaan daripada asal yang ditentukan (mydomain.com)
• Subdomain dari asal yang ditentukan
• Menetapkan umur maksimum pengepala CORS kepada 3000 saat
• Membenarkan pengepala permintaan yang bermula dengan "Kandungan-" dan "Hos"

Walau bagaimanapun, disebabkan cache Cloudfront bagi pengepala Access-Control-Allow-Origin, sesetengah pembangun telah melaporkan isu dengan pemuatan fon merentas domain. Untuk mengatasinya, penyelesaian adalah dengan menggunakan rentetan pertanyaan untuk membezakan antara panggilan daripada domain yang berbeza:

curl -i -H "Origin: https://a.domain.com" http://hashhashhash.cloudfront.net/font.woff?https_a.domain.com

Pendekatan ini membolehkan Cloudfront menyampaikan respons unik untuk domain yang berbeza, memintas isu caching.

Kesimpulannya, menggunakan Amazon S3 CORS bersama-sama dengan penyelesaian rentetan pertanyaan boleh menyelesaikan isu pemuatan fon merentas domain Firefox. Jika bantuan lanjut diperlukan, rujuk urutan forum AWS yang dipetik untuk mendapatkan cerapan dan penjelasan tambahan daripada pakar Amazon.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membetulkan Isu Pemuatan Fon Merentas Domain Firefox dengan Amazon S3 CORS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!