Tengo una aplicación Javascript que se entrega al navegador desde un punto final de CloudFront. Todos los archivos estáticos de la aplicación están alojados en un depósito de S3. Esto implica una gran cantidad de archivos javascript y css, así como algunos archivos de fuentes.
El HTML que carga toda la aplicación es generado y entregado por un servidor, llamemos a ese servidor "https://mi.dominio.com".
Como se mencionó, este es solo el archivo html.TodoLuego, el contenido estático se descarga desde el punto final de la nube, que apunta a un depósito como origen. Llamemos a estos xxxx.cloudfront.net y al depósito mi-depósito.
Hasta donde tengo entendido, prácticamente cualquier solicitud desde ese html generado al punto final de la nube es una solicitud CORS, ya que el origen del html es my.domain.com, y todos los archivos solicitados claramente no están alojados en ese dominio.
Entonces, naturalmente, fui a configurar todo el material de CORS. En primer lugar, el depósito es completamente público y tiene la siguiente política CORS:
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET"
],
"AllowedOrigins": [
"*",
],
"ExposeHeaders": [],
"MaxAgeSeconds": 3000
}
]
Y eso parece funcionar, para todo...exceptolos archivos de fuentes! Probablemente debería mencionar la estructura de carpetas del depósito. Tiene tres carpetas, producción, desarrollo y común. El contenido de estos debería explicarse por sí solo. Common contiene las fuentes, así como algunas bibliotecas de JavaScript de terceros. La producción y el desarrollo contienen js y css para sus respectivos entornos.
En todo caso,todose carga, excepto los archivos de fuentes, para los cuales aparece el siguiente error:
Access to font at 'https://xxxx.cloudfront.net/common/fonts/outline/budicon-classic.ttf?jdete2' from origin 'https://my.domain.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Me pareció extremadamente extraño quesololos archivos de fuentes tendrían este problema. Otros archivos en la carpeta común parecen cargarse bien, y si simplemente pegohttps://xxxx.cloudfront.net/common/fonts/outline/budicon-classic.ttf?jdete2en mi navegador,obras.
La única diferencia parece ser que estos archivos no se cargan desde html, sino desde css a través de @font-face. Al observar las solicitudes generadas por el navegador al cargar la aplicación, puedo ver claramente que, por ejemplo, el encabezado de origen está configurado, lo cual no era para solicitar archivos js o css. Set-Fetch-Mode está configurado en "cors", mientras que para los otros archivos se configuró en "no-cors".
En cualquier caso, intenté solucionar el problema desde el lado de la nube. Primero, agregué el encabezado "Access-Control-Allow-Origin: *" a la configuración de origen. Luego agregué una configuración de comportamiento para el origen para permitir GET, HEAD, OPTIONS para el patrón de ruta *.
Y ahora... bueno, todavía tengo el mismo problema y no tengo ninguna idea, aunque me pregunto por qué la solicitud creada por @font-face se forma de manera tan diferente en comparación con las solicitudes de recursos javascript y css, pero Sobre todo, ¿qué puedo hacer para cargar esas malditas fuentes?
Respuesta1
Ok, esto fue molesto, pero supongo que es lógico.
Las correcciones que publiqué arribahacer trabajo, pero los cambios de configuración no invalidan la caché de Cloudfront. Y dado que los errores CORS son generados por elnavegador, Cloudfront almacenó en caché esa respuesta, encabezados y todo, ya que no pudo ver nada malo en ella.
En pocas palabras: caché de nube invalidada después de cambios de configuración, ahora funciona. ¡ARGH!