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


159

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.


55
Tengo el mismo problema ... Comencé a notarlo después de actualizar a Chrome 37.0.2062.94
kirley

Después de actualizar la configuración de CORS, cambié el nombre de los activos y logré que funcionara. Entonces, 1) La configuración CORS se aplica solo a la creación de archivos (no la actualización) O 2) la configuración CORS se almacena en caché en Cloudfront. Publicaré esto como respuesta si otros pueden confirmar que también les funciona.
Dallas Clark

1
Acabo de notar esto con Chrome v. 37.0.2062.94 pero no una versión anterior. No tengo una configuración CORS en absoluto en S3, así que esto no debería estar sucediendo, ¿verdad?
Ghopper21

1
@ Ghopper21 necesita la configuración CORS correcta. Pruebe en Firefox y eso le dará (probablemente) el mismo resultado.
Tim Diggins

1
@RichPeck: solucione agregando la configuración CORS correcta a S3 (o si crea automáticamente su CDN desde la fuente, entonces es un poco más complicado: debe agregar los encabezados apropiados y luego invalidar sus fuentes en caché) ... stackoverflow.com / preguntas / 12229844 /… vea la respuesta a continuación para más detalles
Tim Diggins

Respuestas:


87

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"

1
Hola, cual es la diferencia Header set Access-Control-Allow-Origin "*"? Gracias
NineCattoRules

8
para las personas de Windows, establezca <add name = "Access-Control-Allow-Origin" value = "*" /> en <customHeaders> en el archivo web.config. Que tengas un buen día
Arsalan Saleem

2
@Simone la diferencia es que con "agregar" el encabezado de respuesta se agrega al conjunto de encabezados existente, incluso si este encabezado ya existe. Esto puede dar como resultado dos (o más) encabezados que tengan el mismo nombre; mientras que con "set" se establece el encabezado de respuesta, reemplazando cualquier encabezado anterior con este nombre. En este caso es la misma causa * los incluye a todos.
Giovanni Di Gregorio

@GiovanniDiGregorio ¡Gracias por la buena información!
NineCattoRules

21
Solo señalar Access-Control-Allow-Origin "*"es potencialmente inseguro ya que abre el dominio al acceso a JavaScript desde cualquier dominio. En su lugar, debe usar un valor de dominio específico, por ejemplo, Access-Control-Allow-Origin "http://example1.com"consulte también stackoverflow.com/a/10636765/583715 para obtener una buena explicación.
David Thomas

59

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.


Gracias por esta respuesta, parece que puede ser un problema para muchos otros. Aunque mi problema estaba ocurriendo en una versión estable de Chrome.
Dallas Clark

45
Esto está sucediendo en Chrome ahora.
justingordon

A medida que la gente sigue refiriéndose (¡incluyéndome a mí mismo!) A esta respuesta, lo he hecho menos histórico y más relevante hasta nuestros días.
Tim Diggins

1
También para su información, descubrí que un mensaje de error "ha sido bloqueado por la política de intercambio de recursos de origen cruzado: no hay encabezado 'Access-Control-Allow-Origin' presente en el recurso solicitado. Origin" en realidad tenía que ver con tener un mal ruta a un archivo de fuente en mi servidor original, y en el frente de la nube y luego redirigiendo a la página de inicio de mi servidor (y la respuesta de redireccionamiento o la página de inicio no tenían los encabezados CORS). Confuso, pero resuelto mediante el uso de la ruta correcta al archivo de fuente real (no es un problema CORS, estrictamente hablando).
Tim Diggins

Hola @DallasClark, es posible que desee elegir una respuesta aceptada para su pregunta. Gracias Tim, tus enlaces y explicaciones fueron útiles en mi experiencia. Salud.
Dan

46

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>

Sin embargo, no estoy seguro acerca de la seguridad, sería bueno si alguien tuviese alguna información sobre eso ...
Özer S.

¿Este cambio necesita tiempo para propagarse? Acabo de agregar <AllowedMethod>HEAD</AllowedMethod>a mi política CORS en el cubo y todavía no funciona.
Salvatore Iovene

generalmente no, debería tomar un máximo. un par de minutos
Özer S.


12

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.


1
Esto no parece funcionar, ¿tienes más detalles? Lo habilité pero sigo teniendo exactamente el mismo problema.
Jaco Pretorius

7

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


1
¡Increíble! ¡Muchas gracias!
Rotimi

1
Como su código fue detallado, me llevó un tiempo leerlo, sin embargo, aprendí algunas cosas. Apliqué una parte para modificar mi solución. Funcionó.
Mohammed Moinuddin Waseem

3

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.


2

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

Merece un voto por recordarnos a nosotros los usuarios de Windows.
mohrtan

Estoy usando asp.net core, ¿cómo agrego esto al archivo appsettings.json?
Yusuff Sodiq

1

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.


0

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


-5

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.


44
Evite las respuestas de solo enlace. Sería útil si pudiera copiar fragmentos relevantes del artículo vinculado en su respuesta. Gracias.
bPratik
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.