La fuente del origen se ha bloqueado para que no se cargue mediante la política de intercambio de recursos de origen cruzado

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

La fuente del origen ‘ https://ABCDEFG.cloudfront.net ‘ se ha bloqueado para que no se cargue por la política de Intercambio de recursos de origen cruzado: No hay encabezado ‘Access-Control-Allow-Origin’ presente en el recurso solicitado. El origen ‘ https://sub.domain.com ‘ no está, por lo tanto, permitido.

Tengo la siguiente configuración de CORS en S3

  * * GET   

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 "*" 

incluso 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 ~ Sep / Oct 2014 hace que las fonts estén sujetas a las mismas verificaciones CORS que Firefox ha hecho https://code.google.com/p/chromium/issues/detail?id=286681 . Hay un debate sobre esto en https://groups.google.com/a/chromium.org/forum/?fromgroups=#!topic/blink-dev/TT9D5-Zfnzw

Dado que para las fonts, el navegador puede realizar 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 este momento no hace CORS verificando las fonts) y Firefox (que lo hace) para verificar que este es el problema descrito.

Consulte la respuesta de desbordamiento de stack en Amazon S3 CORS (Intercambio de recursos de origen cruzado) y la carga de fonts entre dominios de Firefox para los detalles de CORS de Amazon S3.

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

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

Ejemplo:

    * GET HEAD 3000 Authorization   

Nginx:

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

AWS S3:

  1. Seleccione su cubo
  2. Haga clic en las propiedades en la parte superior derecha
  3. Permisions => Edit Cors Configuration => 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 correcto en CloudFront, por lo que ahora solo

Establezca una configuración de CORS para su cubo S3:

 * 

En CloudFront -> Distribución -> Comportamientos para este origen, use la opción Forward Headers: Whitelist y incluya en la lista blanca el encabezado ‘Origin’.

Espere unos 20 minutos mientras CloudFront propaga la nueva regla

Ahora, su distribución de CloudFront debe almacenar en caché diferentes respuestas (con encabezados CORS correctos) para diferentes encabezados de Origen de cliente.

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

Pegue esto en su archivo .htaccess:

   Header set Access-Control-Allow-Origin "*"    # 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  # rewrite www.example.com → example.com  RewriteCond %{HTTPS} !=on RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC] RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]  

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 de esto es:

  1. Editar la configuración S3 CORS (la muestra de mi código no se mostró correctamente)
    Nota: Esto ya está hecho en la pregunta original
    Nota: el código proporcionado no es muy seguro, 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 avanzados” de “Ninguno (mejora el almacenamiento en caché)” a “Lista blanca”.
  4. Agregue “Origen” a la lista “Encabezados de lista blanca”
  5. Guarde 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 verificar verificando que los mensajes de error relacionados con CORS hayan desaparecido del navegador.

Hay un buen escrito aquí .

Configurar esto en nginx / apache es un error.
Si está utilizando una empresa de hosting no puede configurar el límite.
Si está utilizando Docker, la aplicación debe ser independiente.

Tenga en cuenta que algunos ejemplos usan connectHandlers pero esto solo establece encabezados en el documento. El uso de rawConnectHandlers aplica a todos los activos servidos (fonts / 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.

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

Combina esto con tu web.config.

Para permitir cualquier dominio, reemplace value="domain" con value="*"

           

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"); 

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

A continuación, se muestra exactamente lo que puede hacer si ejecuta su aplicación Rails en Heroku y utiliza Cloudfront como su CDN. Fue probado en Ruby 2.1 + Rails 4, stack de Cedar de Heroku.

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

  • Agrega gem font_assets a Gemfile.
  • bundle install
  • Agregue 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
  • Push code to Heroku.

Configurar 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 fonts (para la aplicación Rails más simple, solo tiene 1 entrada aquí). Cambia los encabezados hacia adelante de “Ninguno” a “Lista de espera”. Y agrega 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 fonts, incluso si el error CORS desaparecía. En este caso, actualice la página unas cuantas veces para convencer a Firefox de que está realmente decidido.

    Intereting Posts