Maison >interface Web >tutoriel CSS >Amazon S3 CORS peut-il résoudre les problèmes de chargement de polices inter-domaines de Firefox ?
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!