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 d'un autre site (disons 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 la v3.5) n'autorise pas les polices inter-domaines par défaut. Cela signifie que la police doit être servie à partir du même domaine (et sous-domaine), sauf si vous pouvez ajouter un en-tête «Access-Control-Allow-Origin» à la police.

Comment puis-je 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 avec les éléments suivants.

<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

également dans votre fichier CSS distant, la déclaration font-face a besoin de l'URL absolue complète du fichier de polices (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. 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 "*"mais vous pouvez la 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 prises en charge dans les implémentations actuelles)

Selon la documentation officielle , les navigateurs n'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 spécifiquement leur origine. Si vous souhaitez toujours autoriser toutes les origines, vous pouvez faire de la magie Apache simple pour le faire fonctionner (assurez-vous que vous avez mod_headersactivé):

Header set Access-Control-Allow-Origin "%{HTTP_ORIGIN}e" env=HTTP_ORIGIN

Les navigateurs sont tenus d'envoyer l'en- Origintête sur toutes les demandes inter-domaines. Les documents indiquent spécifiquement que vous devez renvoyer cet en-tête dans l'en- Access-Control-Allow-Origintête si vous acceptez / prévoyez d'accepter la demande. C'est ce que fait cette Headerdirective.

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

Puisque 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:

1. Accédez à l'interface utilisateur de Cloud Files et ajoutez un en-tête personnalisé (Access-Control-Allow-Origin avec valeur *) pour chaque fichier font-awesome
2. Changez le Content-Type des fichiers woff et ttf en font / woff et font / ttf respectivement

Voyez si vous pouvez vous en tirer avec juste le # 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 du fichier
• faites défiler jusqu'au fichier
• cliquez sur l'icône de la roue dentée
• cliquez sur Modifier les en-têtes
• sélectionnez Access-Control-Allow-Origin
• ajoutez le caractère unique '*' (sans les guillemets)
• appuyez sur Entrée
• répéter pour les autres fichiers

Si vous devez continuer et faire le n ° 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 de 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'objet et changer les types de contenu, alors peut-être que vous aurez de la chance (et publierez des informations supplémentaires ici).

Pour une application basée sur Java, ajoutez ceci à 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. Cela résoudra certainement votre problème. Il existe de nombreuses solutions pour faire des appels cross domain GET Ajax MAIS POST DEMANDE POUR CROSS DOMAIN EST RÉSOLU ICI . Il m'a fallu 3 jours pour le comprendre.

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

Dans votre fichier.php de la requête ajax, vous pouvez définir l'en-tête de valeur.

<?php header('Access-Control-Allow-Origin: *'); //for all ?>