amazon web services - origin - La política de intercambio de recursos de origen cruzado ha bloqueado la carga de la fuente de origen

cross-origin resource sharing

Question

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.

Answer 1

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, p. ej.

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

Answer 2

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 actualmente no hace que CORS verifique las fuentes) y Firefox (que sí) para verificar dos veces, este es 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.

Answer 3

El 26 de junio de 2014, AWS lanzó el comportamiento Vary: Origin adecuado en CloudFront, por lo 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.

Answer 4

Hay una buena reseña here .

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 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.

Answer 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.

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

• Agregue 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
• 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.

Answer 6

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

Answer 7

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/

Answer 8

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

Combina esto con tu web.config.

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

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

Answer 9

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>

Answer 10

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.