Maison >interface Web >tutoriel CSS >Amazon S3 CORS peut-il résoudre les problèmes de chargement de polices inter-domaines de Firefox ?

Amazon S3 CORS peut-il résoudre les problèmes de chargement de polices inter-domaines de Firefox ?

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-12-05 21:47:12336parcourir

Can Amazon S3 CORS Solve Firefox's Cross-Domain Font Loading Problems?

Chargement de polices inter-domaines Amazon S3 CORS et Firefox

Arrière-plan

Firefox a historiquement rencontré des difficultés pour charger des polices provenant d'origines distinctes de la page Web actuelle, en particulier lorsque les polices sont stockées sur des CDN. Bien que diverses solutions aient été proposées, l'introduction du partage de ressources cross-origine (CORS) Amazon S3 soulève la question de savoir si ce problème peut être résolu à l'aide de CORS.

Configuration CORS

Une configuration Amazon S3 CORS qui a été implémentée avec succès pour résoudre ce problème est fournie ci-dessous :

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

L'importance du Les paramètres AllowedMethod (GET) et AllowedHeader (Content-*) dans cette configuration sont cruciaux.

Solution de contournement de la chaîne de requête

Dans certains cas, les développeurs peuvent rencontrer des problèmes dus à Cloudfront mise en cache de l'en-tête Access-Control-Allow-Origin. Pour résoudre ce problème, le personnel d'AWS recommande d'utiliser une chaîne de requête pour différencier les requêtes provenant de différents domaines.

En utilisant une chaîne de requête unique pour chaque domaine, telle que "?https_a.domain.com" et "?http_b. domain.com", Cloudfront renverra différentes valeurs Access-Control-Allow-Origin, permettant le chargement des polices entre les domaines.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn