La política de intercambio de recursos de origen cruzado ha bloqueado la carga de la fuente de origen

Recibo el siguiente error en un par de navegadores Chrome, pero no en todos. No estoy completamente seguro de cuál es el problema en este momento.

La fuente de origen ' https://ABCDEFG.cloudfront.net ' ha sido bloqueada por la política de intercambio de recursos de origen cruzado: No hay encabezado 'Access-Control-Allow-Origin' presente en el recurso solicitado. Por lo tanto, el origen ' https://sub.domain.com ' no tiene acceso permitido.

Tengo la siguiente configuración de CORS en S3

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

La solicitud

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

Todas las demás solicitudes de Cloudfront / S3 funcionan correctamente, incluidos los archivos JS.

Agregue esta regla a su .htaccess

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

aún mejor, como lo sugiere @david thomas, puede usar un valor de dominio específico, por ejemplo

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

Chrome desde ~ septiembre / octubre de 2014 hace que las fuentes estén sujetas a las mismas comprobaciones de CORS que Firefox ha realizado https://code.google.com/p/chromium/issues/detail?id=286681 . Hay una discusión sobre esto en https://groups.google.com/a/chromium.org/forum/?fromgroups=#!topic/blink-dev/TT9D5-Zfnzw

Dado que para las fuentes, el navegador puede hacer una verificación previa , entonces su política S3 también necesita el encabezado de solicitud cors . Puede verificar su página en, por ejemplo, Safari (que en la actualidad no hace que CORS verifique las fuentes) y Firefox (que sí) para verificar que este sea el problema descrito.

Consulte la respuesta de desbordamiento de pila en Amazon S3 CORS (Cross-Origin Resource Sharing) y la carga de fuentes entre dominios de Firefox para los detalles de Amazon S3 CORS.

Nota: en general, porque esto solía aplicarse solo a Firefox, por lo que puede ser útil buscar Firefox en lugar de Chrome.

Pude resolver el problema simplemente agregando <AllowedMethod>HEAD</AllowedMethod>a la política CORS del S3 Bucket.

Ejemplo:

<?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. Selecciona tu cubo
2. Haga clic en propiedades en la parte superior derecha
3. Permisos => Editar configuración de Cors => Guardar
4. Salvar

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

El 26 de junio de 2014, AWS lanzó el comportamiento Vary: Origin adecuado en CloudFront, así que ahora solo

Establezca una configuración CORS para su depósito S3:

<AllowedOrigin>*</AllowedOrigin>

En CloudFront -> Distribución -> Comportamientos para este origen, use la opción Encabezados hacia adelante: Lista blanca y la lista blanca en el encabezado 'Origen'.

Espere ~ 20 minutos mientras CloudFront propaga la nueva regla

Ahora su distribución de CloudFront debe almacenar en caché diferentes respuestas (con encabezados CORS adecuados) para diferentes encabezados de origen del cliente.

Lo único que me ha funcionado (probablemente porque tuve inconsistencias con el uso de www.):

Pegue esto en su archivo .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

Tuve el mismo problema y este enlace me proporcionó la solución:

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

La versión corta es:

1. Editar configuración de S3 CORS (mi muestra de código no se mostró correctamente)
   Nota: Esto ya se hizo en la pregunta original
   Nota: el código proporcionado no es muy seguro, hay más información en la página vinculada.
2. Vaya a la pestaña "Comportamientos" de su distribución y haga clic para editar
3. Cambie "Encabezados hacia adelante" de "Ninguno (mejora el almacenamiento en caché)" a "Lista blanca".
4. Agregue "Origen" a la lista "Encabezados de la lista blanca"
5. Guarda los cambios

Su distribución en la nube se actualizará, lo que demora aproximadamente 10 minutos. Después de eso, todo debería estar bien, puede verificarlo verificando que los mensajes de error relacionados con CORS hayan desaparecido del navegador.

Para aquellos que usan productos de Microsoft con un archivo web.config:

Combine esto con su web.config.

Para permitir en cualquier dominio reemplazar 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>

Si no tiene permiso para editar web.config, agregue esta línea en su código del lado del servidor.

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

Hay una buena reseña aquí .

Configurar esto en nginx / apache es un error.
Si está utilizando una empresa de alojamiento, no puede configurar el borde.
Si está utilizando Docker, la aplicación debe ser autónoma.

Tenga en cuenta que algunos ejemplos usan connectHandlerspero esto solo establece encabezados en el documento. El uso se rawConnectHandlersaplica a todos los activos servidos (fuentes / css / etc.).

  // 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();
  });

Este sería un buen momento para mirar la política del navegador como el encuadre, etc.

Simplemente agregue el uso de origen en su si usa node.js como servidor ...

Me gusta esto

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

Necesitamos respuesta para el origen

La solución de trabajo para heroku está aquí http://kennethjiang.blogspot.com/2014/07/set-up-cors-in-cloudfront-for-custom.html (siguen las citas):

A continuación se muestra exactamente lo que puede hacer si está ejecutando su aplicación Rails en Heroku y está usando Cloudfront como su CDN. Fue probado en Ruby 2.1 + Rails 4, pila Heroku Cedar.

Agregue encabezados HTTP CORS (Access-Control- *) a los recursos de fuente

• Añadir gema font_assetsa Gemfile.
• bundle install
• Añadir config.font_assets.origin = '*'a config/application.rb. Si desea un control más granular, puede agregar diferentes valores de origen a diferentes entornos, por ejemplo,config/config/environments/production.rb
• curl -I http://localhost:3000/assets/your-custom-font.ttf
• Empuja el código a Heroku.

Configure Cloudfront para reenviar encabezados HTTP CORS

En Cloudfront, seleccione su distribución, en la pestaña "comportamiento", seleccione y edite la entrada que controla la entrega de sus fuentes (para la aplicación Rails más simple, solo tiene 1 entrada aquí). Cambie Encabezados hacia adelante de "Ninguno" a "Lista de tiempo". Y agregue los siguientes encabezados a la lista blanca:

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

¡Guárdalo y listo!

Advertencia: descubrí que a veces Firefox no actualizaba las fuentes incluso si el error CORS desaparecía. En este caso, actualice la página varias veces para convencer a Firefox de que está realmente decidido.