Como adicionar um cabeçalho Access-Control-Allow-Origin

Estou projetando um site (por exemplo, mywebsite.com) e este site carrega fontes font-face de outro site (digamos, anothersite.com). Eu estava tendo problemas com o carregamento de fontes da face da fonte no Firefox e continuei lendo neste blog :

O Firefox (que oferece suporte a @ font-face da v3.5) não permite fontes entre domínios por padrão. Isso significa que a fonte deve ser fornecida a partir do mesmo domínio (e subdomínio), a menos que você possa adicionar um cabeçalho “Access-Control-Allow-Origin” à fonte.

Como posso definir o cabeçalho Access-Control-Allow-Origin para a fonte?

Então o que você faz é ... Na pasta de arquivos de fontes, coloque um arquivo htaccess com o seguinte.

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

também em seu arquivo CSS remoto, a declaração da face da fonte precisa do URL absoluto completo do arquivo da fonte (não é necessário nos arquivos CSS locais):

por exemplo

@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')

}

Isso vai resolver o problema. Uma coisa a observar é que você pode especificar exatamente quais domínios devem ter permissão para acessar sua fonte. No htaccess acima, especifiquei que todos podem acessar minha fonte, no "*"entanto, você pode limitá-la a:

Um único URL:

Conjunto de cabeçalhos Access-Control-Allow-Origin http://example.com

Ou uma lista de URLs delimitada por vírgulas

Access-Control-Allow-Origin: http://site1.com,http://site2.com

(Vários valores não são suportados nas implementações atuais)

De acordo com os documentos oficiais , os navegadores não gostam quando você usa o

Access-Control-Allow-Origin: "*"

cabeçalho se você também estiver usando o

Access-Control-Allow-Credentials: "true"

cabeçalho. Em vez disso, eles querem que você permita especificamente sua origem. Se você ainda deseja permitir todas as origens, pode fazer uma mágica simples do Apache para fazê-lo funcionar (certifique-se de ter mod_headersativado):

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

Os navegadores são obrigados a enviar o Origincabeçalho em todas as solicitações entre domínios. Os documentos declaram especificamente que você precisa repetir esse cabeçalho no Access-Control-Allow-Origincabeçalho se estiver aceitando / planejando aceitar a solicitação. É isso que esta Headerdiretiva está fazendo.

A resposta aceita não funciona para mim, infelizmente, uma vez que os arquivos CSS do meu site @importam os arquivos CSS da fonte, e todos eles estão armazenados em um Rackspace Cloud Files CDN.

Como os cabeçalhos do Apache nunca são gerados (já que meu CSS não está no Apache), tive que fazer várias coisas:

1. Vá para a IU do Cloud Files e adicione um cabeçalho personalizado (Access-Control-Allow-Origin com valor *) para cada arquivo de fonte incrível
2. Altere o Content-Type dos arquivos woff e ttf para font / woff e font / ttf respectivamente

Veja se consegue se safar com apenas o # 1, já que o segundo requer um pouco de trabalho na linha de comando.

Para adicionar o cabeçalho personalizado em # 1:

• ver o contêiner de arquivos em nuvem para o arquivo
• role para baixo até o arquivo
• clique no ícone de engrenagem
• clique em Editar cabeçalhos
• selecione Access-Control-Allow-Origin
• adicione o único caractere '*' (sem as aspas)
• aperte enter
• repita para os outros arquivos

Se você precisar continuar e fazer o # 2, precisará de uma linha de comando com 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

Dos resultados retornados, extraia os valores de X-Auth-Token e 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

Claro, esse processo só funciona se você estiver usando o Rackspace CDN. Outros CDNs podem oferecer recursos semelhantes para editar cabeçalhos de objetos e alterar tipos de conteúdo, então talvez você tenha sorte (e publique algumas informações extras aqui).

Para aplicativos baseados em Java, adicione ao seu arquivo 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>

Verifique este link .. Definitivamente resolverá seu problema .. Existem muitas soluções para fazer chamadas de domínio cruzado GET Ajax, MAS PÓS-PEDIDO DE CROSS DOMAIN ESTÁ RESOLVIDO AQUI . Levei 3 dias para descobrir.

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

Em seu arquivo.php de solicitação ajax, pode definir o cabeçalho do valor.

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