Come aggiungere un'intestazione Access-Control-Allow-Origin

Sto progettando un sito web (es. Mywebsite.com) e questo sito carica i font font-face da un altro sito (diciamo anothersite.com). Ho riscontrato problemi con il caricamento del carattere del tipo di carattere in Firefox e ho letto su questo blog :

Firefox (che supporta @ font-face dalla v3.5) non consente i caratteri interdominio per impostazione predefinita. Ciò significa che il font deve essere offerto dallo stesso dominio (e sottodominio) a meno che non sia possibile aggiungere un'intestazione "Access-Control-Allow-Origin" al font.

Come posso impostare l'intestazione Access-Control-Allow-Origin sul carattere?

Quindi quello che fai è ... Nella cartella dei file dei caratteri metti un file htaccess con quanto segue.

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

anche nel file CSS remoto, la dichiarazione font-face richiede l'URL assoluto completo del file font (non necessario nei file CSS locali):

per esempio

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

}

Questo risolverà il problema. Una cosa da notare è che puoi specificare esattamente quali domini dovrebbero essere autorizzati ad accedere al tuo carattere. Nell'htaccess sopra ho specificato che tutti possono accedere al mio font con "*"tuttavia puoi limitarlo a:

Un unico URL:

Set di intestazioni Access-Control-Allow-Origin http://example.com

O un elenco di URL delimitato da virgole

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

(Più valori non sono supportati nelle implementazioni correnti)

Secondo i documenti ufficiali , ai browser non piace quando si utilizza l'estensione

Access-Control-Allow-Origin: "*"

se utilizzi anche il file

Access-Control-Allow-Credentials: "true"

intestazione. Invece, vogliono che tu consenta la loro origine in modo specifico. Se vuoi comunque consentire tutte le origini, puoi fare qualche semplice magia di Apache per farlo funzionare (assicurati di aver mod_headersabilitato):

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

I browser devono inviare l' Originintestazione su tutte le richieste interdominio. I documenti affermano specificamente che è necessario riportare questa intestazione Access-Control-Allow-Originnell'intestazione se si accetta / si prevede di accettare la richiesta. Questo è ciò che Headersta facendo questa direttiva.

La risposta accettata non funziona per me sfortunatamente, poiché i file CSS del mio sito @importano i file CSS dei font e questi sono tutti archiviati su un CDN di Rackspace Cloud Files.

Poiché le intestazioni di Apache non vengono mai generate (poiché il mio CSS non è su Apache), ho dovuto fare diverse cose:

1. Vai all'interfaccia utente di Cloud Files e aggiungi un'intestazione personalizzata (Access-Control-Allow-Origin con valore *) per ogni file con caratteri fantastici
2. Modificare il tipo di contenuto dei file woff e ttf rispettivamente in font / woff e font / ttf

Vedi se riesci a cavartela con solo # 1, poiché il secondo richiede un po 'di lavoro da riga di comando.

Per aggiungere l'intestazione personalizzata in # 1:

• visualizzare il contenitore dei file cloud per il file
• scorri verso il basso fino al file
• fare clic sull'icona a forma di ingranaggio
• fare clic su Modifica intestazioni
• selezionare Access-Control-Allow-Origin
• aggiungi il carattere singolo "*" (senza virgolette)
• premi invio
• ripetere per gli altri file

Se devi continuare e fare # 2, allora avrai bisogno di una riga di comando con 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

Dai risultati restituiti, estrai i valori per 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

Ovviamente, questo processo funziona solo se stai utilizzando il CDN di Rackspace. Altri CDN possono offrire servizi simili per modificare le intestazioni degli oggetti e cambiare i tipi di contenuto, quindi forse sarai fortunato (e pubblicherai alcune informazioni extra qui).

Per l'applicazione basata su Java, aggiungilo al tuo file 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>

Controlla questo link .. Risolverà sicuramente il tuo problema .. Ci sono molte soluzioni per effettuare chiamate Cross Domain GET Ajax MA LA RICHIESTA POST PER CROSS DOMAIN È RISOLTA QUI . Mi ci sono voluti 3 giorni per capirlo.

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

Nel tuo file.php di richiesta ajax, puoi impostare il valore di intestazione.

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