Il font di origine è stato bloccato dal caricamento dalla politica di condivisione delle risorse tra le origini

Ricevo il seguente errore su un paio di browser Chrome, ma non tutti. Non sono del tutto sicuro di quale sia il problema a questo punto.

Il font di origine ' https://ABCDEFG.cloudfront.net ' è stato bloccato dal caricamento dalla politica di condivisione delle risorse tra le origini: nessuna intestazione 'Access-Control-Allow-Origin' è presente sulla risorsa richiesta. L'origine ' https://sub.domain.com ' non è quindi consentita l'accesso.

Ho la seguente configurazione CORS su S3

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedHeader>*</AllowedHeader>
   <AllowedMethod>GET</AllowedMethod>
 </CORSRule>
</CORSConfiguration>

La richiesta

Remote Address:1.2.3.4:443
Request URL:https://abcdefg.cloudfront.net/folder/path/icons-f10eba064933db447695cf85b06f7df3.woff
Request Method:GET
Status Code:200 OK
Request Headers
Accept:*/*
Accept-Encoding:gzip,deflate
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Host:abcdefg.cloudfront.net
Origin:https://sub.domain.com
Pragma:no-cache
Referer:https://abcdefg.cloudfront.net/folder/path/icons-e283e9c896b17f5fb5717f7c9f6b05eb.css
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.94 Safari/537.36

Tutte le altre richieste da Cloudfront / S3 funzionano correttamente, inclusi i file JS.

Aggiungi questa regola al tuo .htaccess

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

ancora meglio, come suggerito da @david thomas, è possibile utilizzare un valore di dominio specifico, ad es

Header add Access-Control-Allow-Origin "your-domain.com"

Chrome da ~ set / ott 2014 rende i caratteri soggetti agli stessi controlli CORS di Firefox fatto https://code.google.com/p/chromium/issues/detail?id=286681 . C'è una discussione su questo in https://groups.google.com/a/chromium.org/forum/?fromgroups=#!topic/blink-dev/TT9D5-Zfnzw

Dato che per i font il browser può eseguire un controllo di verifica preliminare , anche la vostra politica S3 ha bisogno dell'intestazione della richiesta cors . Puoi controllare la tua pagina dicendo Safari (che al momento non esegue il controllo CORS per i caratteri) e Firefox (che fa) per ricontrollare questo è il problema descritto.

Vedi la risposta di overflow dello stack su Amazon S3 CORS (Cross-Origin Resource Sharing) e il caricamento di font tra domini di Firefox per i dettagli di Amazon S3 CORS.

NB in ​​generale perché si applicava solo a Firefox, quindi potrebbe essere utile cercare Firefox anziché Chrome.

Sono stato in grado di risolvere il problema semplicemente aggiungendo <AllowedMethod>HEAD</AllowedMethod>alla politica CORS della benna S3.

Esempio:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

nginx:

location ~* \.(eot|ttf|woff)$ {
   add_header Access-Control-Allow-Origin '*';
}

AWS S3:

1. Seleziona il tuo secchio
2. Fai clic su proprietà in alto a destra
3. Autorizzazioni => Modifica configurazione cors => Salva
4. Salva

http://schock.net/articles/2013/07/03/hosting-web-fonts-on-a-cdn-youre-going-to-need-some-cors/

Il 26 giugno 2014 AWS ha rilasciato il comportamento corretto di Vary: Origin su CloudFront, quindi ora basta

Imposta una configurazione CORS per il tuo bucket S3:

<AllowedOrigin>*</AllowedOrigin>

In CloudFront -> Distribution -> Behaviors per questa origine, usa l'opzione Forward Headers: Whitelist e aggiungi alla whitelist l'intestazione 'Origin'.

Attendere ~ 20 minuti mentre CloudFront propaga la nuova regola

Ora la tua distribuzione CloudFront dovrebbe memorizzare nella cache risposte diverse (con intestazioni CORS appropriate) per diverse intestazioni Origin client.

L'unica cosa che ha funzionato per me (probabilmente perché avevo incoerenze con l'uso di www.):

Incollalo nel tuo file .htaccess:

<IfModule mod_headers.c>
<FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>
<IfModule mod_mime.c>
# Web fonts
AddType application/font-woff woff
AddType application/vnd.ms-fontobject eot

# Browsers usually ignore the font MIME types and sniff the content,
# however, Chrome shows a warning if other MIME types are used for the
# following fonts.
AddType application/x-font-ttf ttc ttf
AddType font/opentype otf

# Make SVGZ fonts work on iPad:
# https://twitter.com/FontSquirrel/status/14855840545
AddType     image/svg+xml svg svgz
AddEncoding gzip svgz

</IfModule>

# rewrite www.example.com → example.com

<IfModule mod_rewrite.c>
RewriteCond %{HTTPS} !=on
RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]
</IfModule>

http://ce3wiki.theturninggate.net/doku.php?id=cross-domain_issues_broken_web_fonts

Ho avuto lo stesso problema e questo link mi ha fornito la soluzione:

http://www.holovaty.com/writing/cors-ie-cloudfront/

La versione breve è:

1. Modifica configurazione S3 CORS (il mio esempio di codice non è stato visualizzato correttamente)
   Nota: questo è già stato fatto nella domanda originale
   Nota: il codice fornito non è molto sicuro, maggiori informazioni nella pagina collegata.
2. Vai alla scheda "Comportamenti" della tua distribuzione e fai clic per modificare
3. Modifica "Inoltra intestazioni" da "Nessuno (migliora la memorizzazione nella cache)" in "Lista bianca".
4. Aggiungi "Origine" all'elenco "Intestazioni whitelist"
5. Salva le modifiche

La tua distribuzione cloudfront verrà aggiornata, il che richiede circa 10 minuti. Dopodiché, tutto dovrebbe andare bene, puoi verificare controllando che i messaggi di errore relativi a CORS siano spariti dal browser.

Per coloro che utilizzano prodotti Microsoft con un file web.config:

Unisci questo con il tuo web.config.

Per consentire su qualsiasi dominio sostituire value="domain"convalue="*"

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
  <system.webserver>
    <httpprotocol>
      <customheaders>
        <add name="Access-Control-Allow-Origin" value="domain" />
      </customheaders>
    </httpprotocol>
  </system.webserver>
</configuration>

Se non si dispone dell'autorizzazione per modificare web.config, aggiungere questa riga nel codice lato server.

Response.AppendHeader("Access-Control-Allow-Origin", "domain");

C'è un bel commento qui .

Configurare questo in nginx / apache è un errore.
Se si utilizza una società di hosting non è possibile configurare il bordo.
Se stai usando Docker, l'app dovrebbe essere autonoma.

Si noti che alcuni esempi utilizzano connectHandlersma questo imposta solo le intestazioni sul documento. L'utilizzo si rawConnectHandlersapplica a tutte le risorse servite (font / css / ecc.).

  // HSTS only the document - don't function over http.  
  // Make sure you want this as it won't go away for 30 days.
  WebApp.connectHandlers.use(function(req, res, next) {
    res.setHeader('Strict-Transport-Security', 'max-age=2592000; includeSubDomains'); // 2592000s / 30 days
    next();
  });

  // CORS all assets served (fonts/etc)
  WebApp.rawConnectHandlers.use(function(req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    return next();
  });

Sarebbe un buon momento per esaminare la politica del browser come l'inquadramento, ecc.

Aggiungi solo l'uso dell'origine nel tuo se usi node.js come server ...

come questo

  app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

Abbiamo bisogno di risposta per l'origine

La soluzione di lavoro per heroku è qui http://kennethjiang.blogspot.com/2014/07/set-up-cors-in-cloudfront-for-custom.html (le virgolette seguono):

Di seguito è esattamente ciò che puoi fare se esegui la tua app Rails in Heroku e usi Cloudfront come CDN. È stato testato su Ruby 2.1 + Rails 4, stack Heroku Cedar.

Aggiungi le intestazioni HTTP CORS (Access-Control- *) agli asset dei caratteri

• Aggiungi gemma font_assetsa Gemfile.
• bundle install
• Aggiungi config.font_assets.origin = '*'a config/application.rb. Se desideri un controllo più granulare, puoi aggiungere valori di origine diversi a un ambiente diverso, ad es.config/config/environments/production.rb
• curl -I http://localhost:3000/assets/your-custom-font.ttf
• Invia il codice a Heroku.

Configurare Cloudfront per inoltrare le intestazioni HTTP CORS

In Cloudfront, seleziona la tua distribuzione, nella scheda "comportamento", seleziona e modifica la voce che controlla la consegna dei caratteri (per la maggior parte delle app Rails semplici hai solo 1 voce qui). Cambia le intestazioni in avanti da "Nessuno" a "Lista Whilel". E aggiungi le seguenti intestazioni alla whitelist:

Access-Control-Allow-Origin
Access-Control-Allow-Methods
Access-Control-Allow-Headers
Access-Control-Max-Age

Salvalo e basta!

Avvertenza: ho scoperto che a volte Firefox non aggiornava i caratteri anche se l'errore CORS è sparito. In questo caso continua ad aggiornare la pagina alcune volte per convincere Firefox che sei veramente determinato.