Se ha bloqueado la carga de la fuente de origen por la política de intercambio de recursos entre orígenes
Estoy recibiendo 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.
Se ha bloqueado la carga de la fuente de origen 'https://ABCDEFG.cloudfront.net' por la política de intercambio de recursos entre orígenes: La cabecera Access-Control-Allow-Origin' no está presente en el recurso solicitado. Por lo tanto, no se permite el acceso al origen 'https://sub.domain.com'.
Tengo la siguiente configuración CORS en S3
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedHeader>*</AllowedHeader>
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>La petición
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.36Todas las demás solicitudes de Cloudfront/S3 funcionan correctamente, incluidos los archivos JS.
152
3
Añada esta regla a su .htaccess.
Incluso mejor, como sugiere @david thomas, puede utilizar un valor de dominio específico, por ejemplo
Chrome desde ~Sep/Oct 2014 hace que las fuentes estén sujetas a las mismas comprobaciones CORS que ha hecho Firefox 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 comprobación previa, entonces su política S3 necesita también la cabecera de solicitud cors. Puede comprobar su página, por ejemplo, en Safari (que en la actualidad no hace la comprobación CORS para las fuentes) y en Firefox (que sí lo hace) para comprobar que este es el problema descrito.
Vea la respuesta de Stack overflow en https://stackoverflow.com/questions/12229844/amazon-s3-cors-cross-origin-resource-sharing-and-firefox-cross-domain-font-loa para los detalles de Amazon S3 CORS.
NB en general, porque esto solía aplicarse a Firefox sólo, por lo que puede ayudar a buscar Firefox en lugar de Chrome.
El 26 de junio de 2014 AWS lanzó el comportamiento adecuado de Vary: Origin en CloudFront por lo que ahora sólo
Establecer una configuración CORS para su bucket de S3:
En CloudFront -> Distribution -> Behaviors para este origen, utilice la opción Forward Headers: Whitelist y ponga en la lista blanca el encabezado 'Origen'.
Espere unos 20 minutos mientras CloudFront propaga la nueva regla
Ahora su distribución de CloudFront debería almacenar en caché diferentes respuestas (con cabeceras CORS adecuadas) para diferentes cabeceras de origen del cliente.