Comment ajouter un en-tête Access-Control-Allow-Origin
Je conçois un site Web (par exemple, mywebsite.com) et ce site charge les polices font-face depuis un autre site (par exemple, anothersite.com). J'avais des problèmes avec le chargement des polices de caractères dans Firefox et j'ai lu sur ce blog :
Firefox (qui prend en charge @ font-face à partir de v3.5) n'autorise pas les polices entre domaines par défaut. Cela signifie que la police doit être servie à partir du même domaine (et sous-domaine) à moins que vous ne puissiez ajouter un en-tête "Accès-Contrôle-Autoriser-Origine" à la police.
Comment définir l'en-tête Access-Control-Allow-Origin sur la police?
Donc, ce que vous faites est ... Dans le dossier des fichiers de polices, mettez un fichier htaccess contenant les éléments suivants.
<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
dans votre fichier CSS distant également, la déclaration font-face de l'URL absolue absolue du fichier-police (inutile 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 résoudra le problème. Une chose à noter est que vous pouvez spécifier exactement quels domaines doivent être autorisés à accéder à votre police. Dans 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:
Ensemble d'en-têtes Access-Control-Allow-Origin http://example.com
Ou une liste d'URL séparées par des virgules
Access-Control-Allow-Origin: http://site1.com,http://site2.com
(Les valeurs multiples ne sont pas supportées dans les implémentations actuelles)
Selon la documentation officielle , les navigateurs ne l’aiment pas lorsque vous utilisez la
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 souhaitez toujours autoriser toutes les origines, vous pouvez utiliser un peu de magie Apache simple pour le faire fonctionner (assurez-vous que vous avez activé mod_headers):
Header set Access-Control-Allow-Origin "%{HTTP_Origin}e" env=HTTP_Origin
Les navigateurs doivent envoyer l'en-tête Origin pour toutes les demandes interdomaines. Les documents indiquent spécifiquement que vous devez renvoyer cet en-tête dans l'en-tête Access-Control-Allow-Origin si vous acceptez/prévoyez d'accepter la demande. C'est ce que fait cette directive Header.
La réponse acceptée ne fonctionne malheureusement pas pour moi, car les fichiers CSS de mon site @ importent les fichiers CSS des polices, et ils sont tous stockés sur un CDN de Rackspace Cloud Files.
Les en-têtes Apache n'étant jamais générés (mon CSS n'étant pas basé sur Apache), je devais faire plusieurs choses:
- Accédez à l'interface utilisateur de Cloud Files et ajoutez un en-tête personnalisé (Access-Control-Allow-Origin avec la valeur *) pour chaque fichier font-awesome.
- Remplacez le type de contenu des fichiers woff et ttf par les polices font/woff et font/ttf
Voyez si vous pouvez vous en tirer avec le n ° 1, car le second nécessite un peu de travail en ligne de commande.
Pour ajouter l'en-tête personnalisé dans # 1:
- afficher le conteneur de fichiers cloud pour le fichier
- faire défiler jusqu'au fichier
- cliquez sur l'icône engrenage
- cliquez sur Edit Headers
- sélectionnez Access-Control-Allow-Origin
- ajouter le caractère unique '*' (sans les guillemets)
- appuyez sur entrer
- répéter pour les autres fichiers
Si vous avez besoin de continuer et de faire # 2, alors 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 entendu, ce processus ne fonctionne que si vous utilisez le CDN Rackspace. D'autres CDN peuvent offrir des fonctionnalités similaires pour modifier les en-têtes d'objet et les types de contenu, alors vous aurez peut-être de la chance (et publiez des informations supplémentaires ici).
Pour une application basée sur Java, ajoutez-la à votre fichier web.xml:
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>*.ttf</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>*.otf</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>*.eot</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>*.woff</url-pattern>
</servlet-mapping>
Vérifiez ce lien .. Il résoudra définitivement votre problème .. Il existe de nombreuses solutions pour effectuer des appels inter-domaines GET Ajax MAIS POST DEMANDE DE DOMAINE CROISÉ IS RESOLU ICI . Il m'a fallu 3 jours pour le comprendre.
Dans votre fichier.php de requête ajax, vous pouvez définir un en-tête de valeur.
<?php header('Access-Control-Allow-Origin: *'); //for all ?>