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


99

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?


Respostas:


164

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)


1
Você não precisa usar caminhos completos. Simples url('/fonts/League_Gothic.woff') format('woff')é suficiente supondo que você mantenha a pasta 'fonts' no mesmo diretório que o seu arquivo .css.
StrayObject

1
Esta solução também é válida para solicitações de domínio cruzado .ajax !! Agradável!
Isaac

3
@StrayObject - o arquivo CSS remoto precisará usar os caminhos completos. O arquivo CSS local não precisa.
Mazateca

Aparentemente, não é possível colocar vários URLs na lista de permissões, delimitados por vírgulas ou outros; ver bug 671608
Tgr

1
Esta resposta ( stackoverflow.com/a/4110601 ) parece sugerir que uma lista separada por vírgulas não funciona
Asaf

21

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.


2
isso parece funcionar para mim também, embora pareça ter o efeito colateral de precisar limpar seu cache se você visitar dois sites diferentes que acessam o site
Jack James

1
@Jack: sim, é um grande problema para conteúdo CDN (olhando para você, arquivos de fonte). Dependendo das configurações de cache, você pode acabar com o conteúdo do arquivo e um cabeçalho CORS incorreto persistindo localmente (como em seu cenário) ou no proxy! (cache-rebentando com ?yourdomainobras em último caso, mas desvaloriza os benefícios de usar um CDN um pouco)
ov

2
Por alguns motivos, HTTP_ORIGIN não está definido para mim, tive que adicionar esta linha SetEnvIfNoCase Origin (.+) HTTP_ORIGIN=$1.
David Riccitelli

5

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).


3

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>


1

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

<?php header('Access-Control-Allow-Origin: *'); //for all ?>
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.