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

Sto progettando un sito Web (ad es. Mywebsite.com) e questo sito carica font di carattere diverso da un altro sito (ad esempio anothersite.com). Stavo riscontrando problemi con il caricamento dei caratteri del font in Firefox e ho letto su questo blog :

Firefox (che supporta @ font-face dalla v3.5) non consente i font tra domini per impostazione predefinita. Ciò significa che il carattere deve essere pubblicato dallo stesso dominio (e sottodominio) a meno che non sia ansible aggiungere un’intestazione “Access-Control-Allow-Origin” al carattere.

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

Quindi quello che fai è … Nella cartella dei file dei font metti un file htaccess con il seguente.

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

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 font. Nell’accesso precedente ho specificato che chiunque può accedere al mio carattere con "*" tuttavia è ansible limitarlo a:

Un singolo URL:

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

O un elenco di URL delimitati da virgole

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

(I valori multipli non sono supportati nelle attuali implementazioni)

Secondo i documenti ufficiali , ai browser non piace quando usi il

 Access-Control-Allow-Origin: "*" 

intestazione se usi anche il

 Access-Control-Allow-Credentials: "true" 

intestazione. Invece, vogliono che tu permetta specificamente la loro origine. Se vuoi comunque consentire tutte le origini, puoi fare un po ‘di magia Apache per farlo funzionare (assicurati di avere mod_headers abilitati):

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

I browser devono inviare l’intestazione Origin su tutte le richieste interdominio. I documenti specificano specificamente che è necessario riportare questa intestazione nell’intestazione Access-Control-Allow-Origin se si accetta / pianifica l’accettazione della richiesta. Questo è ciò che questa direttiva Header sta facendo.

Purtroppo la risposta accettata non funziona, dal momento che 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 font-awesome
  2. Cambia il tipo di contenuto dei file woff e ttf rispettivamente con font / woff e font / ttf

Vedi se riesci a farla franca con solo # 1, dal momento che il secondo richiede un po ‘di lavoro da riga di comando.

Per aggiungere l’intestazione personalizzata nel n. 1:

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

Se devi continuare e fare # 2, 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 usando il CDN di Rackspace. Altri CDN potrebbero offrire servizi simili per modificare le intestazioni degli oggetti e modificare i tipi di contenuto, quindi forse sarai fortunato (e pubblichi qui qualche informazione extra).

Per l’applicazione basata su Java, aggiungila al tuo file web.xml:

  default *.ttf   default *.otf   default *.eot   default *.woff  

Controlla questo link .. Risolverà sicuramente il tuo problema .. Ci sono molte soluzioni per effettuare chiamate cross-GET su Ajax, MA RICHIESTA POST PER DOMAIN CROSS È 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 della richiesta ajax, puoi impostare l’intestazione del valore.