Comment ajouter un en-tête Access-Control-Allow-Origin

Question

Je conçois un site web (par exemple monsite.example ) et ce site charge des polices font-face d'un autre site (disons unautresite.example ). J'avais des problèmes avec le chargement de la police font-face dans Firefox et j'ai lu sur ce blog:

Firefox (qui prend en charge @font-face à partir de la version 3.5) ne permet pas par défaut les polices provenant d'un autre domaine. Cela signifie que la police doit être servie depuis le même domaine (et sous-domaine) à moins que vous puissiez ajouter 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?

Answer 1

Donc ce que vous devez faire est... Dans le dossier des fichiers de polices, placer un fichier .htaccess avec le contenu suivant :

    Header set Access-Control-Allow-Origin "*"

aussi 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 résoudra le problème. Notez que vous pouvez spécifier précisément quels domaines sont autorisés à accéder à votre police. Dans le fichier .htaccess ci-dessus, j'ai spécifié que tout le monde peut accéder à ma police avec "*" cependant vous pouvez limiter à :

Une seule URL :

Header set Access-Control-Allow-Origin http://example.com

Ou une liste de URLs 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)

Answer 2

Selon les documents officiels , les navigateurs n'aiment pas quand vous utilisez

 Access-Control-Allow-Origin: "*"

l'en-tête si vous utilisez également le

 Access-Control-Allow-Credentials: "true"

l'en-tê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 un peu de magie Apache simple pour que cela fonctionne (assurez-vous d'avoir 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 inter-domaines. Les documents précisent spécifiquement que vous devez renvoyer cet en-tête dans l'en-tête Access-Control-Allow-Origin si vous acceptez/avez l'intention d'accepter la requête. C'est ce que fait cette directive Header .

Answer 3

La réponse acceptée ne fonctionne malheureusement pas pour moi, car les fichiers CSS de mon site @importent les fichiers CSS de police, et ceux-ci sont tous stockés sur un CDN de Rackspace Cloud Files.

Comme les en-têtes Apache ne sont jamais générés (car mon CSS n'est pas sur Apache), j'ai dû faire plusieurs choses :

1. Aller dans l'interface utilisateur des Cloud Files et ajouter un en-tête personnalisé (Access-Control-Allow-Origin avec la valeur *) pour chaque fichier de police awesome
2. Changer le type de contenu des fichiers woff et ttf en font/woff et font/ttf respectivement

Voyez si vous pouvez vous en sortir en ne faisant que le #1, car le deuxième nécessite un peu de travail en ligne de commande.

Pour ajouter l'en-tête personnalisé dans le #1 :

• afficher le conteneur cloud files pour le fichier
• faire défiler jusqu'au fichier
• cliquer sur l'icône en forme de roue dentée
• cliquer sur Modifier les en-têtes
• sélectionner Access-Control-Allow-Origin
• ajouter le caractère unique '*' (sans les guillemets)
• appuyer sur entrée
• répéter pour les autres fichiers

Si vous devez continuer et faire le #2, alors vous aurez besoin d'une ligne de commande avec CURL

curl -D - --header "X-Auth-Key: votre-clé-d'authentification-de-votre-panneau-de-contrôle-rackspace-cloud" --header "X-Auth-User: votre-nom-d'utilisateur-cloud" https://auth.api.rackspacecloud.com/v1.0

À partir des résultats retournés, extrayez les valeurs pour X-Auth-Token et X-Storage-Url

curl -X POST \
  -H "Content-Type: font/woff" \
  --header "X-Auth-Token: token-d'auth-retourné" url-de-stockage-retourné/nom-de-votre-conteneur/fonts/fontawesome-webfont.woff

curl -X POST \
  -H "Content-Type: font/ttf" \
  --header "X-Auth-Token: token-d'auth-retourné" url-de-stockage-retourné/nom-de-votre-conteneur/fonts/fontawesome-webfont.ttf

Bien sûr, ce processus fonctionne uniquement si vous utilisez le CDN de Rackspace. D'autres CDN peuvent offrir des installations similaires pour éditer les en-têtes des objets et changer les types de contenu, donc peut-être que vous aurez de la chance (et postez des informations supplémentaires ici).

Answer 4

Pour une application basée sur Java, ajoutez ceci à votre fichier web.xml :

    default
    *.ttf

    default
    *.otf

    default
    *.eot

    default
    *.woff

Answer 5

Vérifiez ce lien.. Cela résoudra certainement votre problème.. Il existe de nombreuses solutions pour effectuer des appels Ajax GET entre domaines croisés MAIS LA REQUÊTE POST POUR DES DOMAINES CROISÉS EST RÉSOLUE ICI. Cela m'a pris 3 jours pour le comprendre.

http://blogs.msdn.com/b/carlosfigueira/archive/2012/02/20/implementing-cors-support-in-asp-net-web-apis.aspx