Je conçois un site Web (par exemple, mywebsite.com) et ce site charge des fonts font-face provenant d’un autre site (par exemple, anothersite.com). J’avais des problèmes avec le chargement de la police de caractères dans Firefox et j’ai lu sur ce blog :
Firefox (qui prend en charge @ font-face à partir de la version 3.5) n’autorise pas les fonts interdomaines par défaut. Cela signifie que la police doit être fournie à partir du même domaine (et sous-domaine), sauf si vous pouvez append un en-tête «Access-Control-Allow-Origin» à la police.
Comment puis-je définir l’en-tête Access-Control-Allow-Origin pour la police?
Donc, ce que vous faites est … Dans le dossier des fichiers de fonts, placez un fichier htaccess contenant les éléments suivants.
Header set Access-Control-Allow-Origin "*"
également dans votre fichier CSS distant, la déclaration font-face a besoin de l’URL absolue complète du fichier de police (non nécessaire dans les fichiers CSS locaux):
par exemple
@font-face { font-family: 'LeagueGothicRegular'; src: url('http://www.example.com/css/fonts/League_Gothic.eot?') format('eot'), url('http://www.example.com/css/fonts/League_Gothic.woff') format('woff'), url('http://www.example.com/css/fonts/League_Gothic.ttf') format('truetype'), url('http://www.example.com/css/fonts/League_Gothic.svg') }
Cela va régler le problème. Une chose à noter est que vous pouvez spécifier exactement quels domaines doivent être autorisés à accéder à votre police. Dans le htaccess ci-dessus, j’ai spécifié que tout le monde peut accéder à ma police avec "*"
mais vous pouvez le limiter à:
Une seule URL:
Access-Control-Allow-Origin: http://example.com
Ou une liste d’URL délimitées par des virgules
Access-Control-Allow-Origin: http://site1.com,http://site2.com
(Plusieurs valeurs ne sont pas sockets en charge dans les implémentations actuelles)
Selon les documents officiels , les navigateurs ne l’aiment pas lorsque vous utilisez le
Access-Control-Allow-Origin: "*"
en-tête si vous utilisez également le
Access-Control-Allow-Credentials: "true"
entête. Au lieu de cela, ils veulent que vous autorisiez leur origine spécifiquement. Si vous voulez toujours autoriser toutes les origines, vous pouvez faire de la magie Apache simple pour le faire fonctionner (assurez-vous que mod_headers
activé):
Header set Access-Control-Allow-Origin "%{HTTP_ORIGIN}e" env=HTTP_ORIGIN
Les navigateurs doivent envoyer l’en-tête Origin
sur toutes les requêtes interdomaines. Les documents précisent que vous devez faire écho à cet en-tête dans l’en Access-Control-Allow-Origin
tête Access-Control-Allow-Origin
si vous acceptez / planifiez d’accepter la demande. C’est ce que fait la directive Header
.
La réponse acceptée ne fonctionne malheureusement pas pour moi, puisque les fichiers CSS de mon site @import les fichiers CSS de la police, et ceux-ci sont tous stockés sur un CDN Rackspace Cloud Files.
Comme les en-têtes Apache ne sont jamais générés (puisque mon CSS n’est pas sur Apache), j’ai dû faire plusieurs choses:
Voyez si vous pouvez vous contenter du n ° 1, car le second nécessite un peu de travail en ligne de commande.
Pour append l’en-tête personnalisé dans # 1:
Si vous devez continuer et faire # 2, vous aurez besoin d’une ligne de commande avec CURL
curl -D - --header "X-Auth-Key: your-auth-key-from-rackspace-cloud-control-panel" --header "X-Auth-User: your-cloud-username" https://auth.api.rackspacecloud.com/v1.0
À partir des résultats renvoyés, extrayez les valeurs pour X-Auth-Token et X-Storage-Url
curl -X POST \ -H "Content-Type: font/woff" \ --header "X-Auth-Token: returned-x-auth-token" returned-x-storage-url/name-of-your-container/fonts/fontawesome-webfont.woff curl -X POST \ -H "Content-Type: font/ttf" \ --header "X-Auth-Token: returned-x-auth-token" returned-x-storage-url/name-of-your-container/fonts/fontawesome-webfont.ttf
Bien sûr, ce processus ne fonctionne que si vous utilisez le CDN Rackspace. D’autres CDN peuvent offrir des fonctionnalités similaires pour éditer les en-têtes d’object et modifier les types de contenu, alors peut-être aurez-vous de la chance (et publiez des informations supplémentaires ici).
Pour l’application Java, ajoutez-la à votre fichier web.xml:
default *.ttf default *.otf default *.eot default *.woff
Vérifiez ce lien .. Il va certainement résoudre votre problème .. Il y a beaucoup de solutions pour faire des appels interdomaine GET Ajax MAIS POST DEMANDE POUR CROSS DOMAIN EST RESOLU ICI . Il m’a fallu 3 jours pour le comprendre.
Dans votre fichier.php de requête ajax, vous pouvez définir l’en-tête de valeur.