Falta el encabezado CORS ‘Access-Control-Allow-Origin’

Un usuario preguntó 👇

Tengo W3 Total Cache instalado pero obtengo el error CORS, en firefox y chrome:

Acceso de impresión en ‘https://cdn.domain.com/wp-content/themes/oceanwp/assets/fonts/fontawesome/fontawesome-webfont.woff2?v=4.7.0 ‘; desde el origen ‘https: //dominio.com ‘; Bloqueado por la política CORS: no hay un encabezado ‘Access-Control-Allow-Origin’ presente en el recurso solicitado.

Mi archivo htaccess tiene los detalles correctos: Seguí estas instrucciones:

https://wordpress.org/support/topic/cors-header-access-control-allow-origin-missing/

y agregó esto al archivo htaccess.php:

SetEnvIf Origin «http (s)?: // (cdn | sub) .domain .com $» AccessControlAllowOrigin = $ 0 Header add Access-Control-Allow-Origin% {AccessControlAllowOrigin} e env = Header Merges AccessControlAllowOrigin Vary Origin

Mi archivo htaccess se ve así:

# COMIENZA W3TC CDN

Encabezado de conjunto Access-Control-Allow-Origin «*» SetEnvIf Base «http (s)?: // (cdn | sub) .domain .com $» AccessControlAllowOrigin = $ 0 Encabezado agregar Access-Control-Allow-Origin% {AccessControlAllowOrigin} e env = Fusionar AccessControlAllowOrigin Vary Origin

# FIN W3TC CDN

Además, permití CORS en un bucket de AWS S3 y mis permisos de S3 son similares:

http://s3.amazonaws.com/doc/2006-03-01/ páginas>; https: //*.domain.com; OBTENER CABEZA ELIMINAR PONER CORREO > Autorización

¿Puedes guiarme para solucionar este problema? Mientras tanto, he desactivado el plugin.

(@vmarko)

Hace 1 año, 4 meses

Hola @amandapandashop

Lamento tu pregunta con Cors Header y estoy feliz de poder ayudarte con esto. La regla .htaccess que agregó debe cambiarse en consecuencia. EG no tiene un subdominio, por lo que debe realizar cambios según el caso de uso. También deberías probarlo * en vez de Autorización con su CORSConfiguration Asegúrese de invalidar la distribución de CloudFront después de realizar los cambios. Consulte los artículos siguientes:
https://aws.amazon.com/premiumsupport/knowledge-center/no-access-control-allow-origin-error/
https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Invalidation.html
¡Espero que esto ayude!

Lanzador de hilos

(@amandapandashop)

Hace 1 año, 4 meses

Hola Marko, gracias por ayudar. No estoy seguro de lo que quiere decir con «no tiene un subdominio, por lo que necesita hacer cambios dependiendo del uso». He configurado el cname «cdn.domain.com». Lo siento, tengo una nueva AWS y una caché completa. ¿Es eso lo que quieres decir? Todo lo mejor,

(@vmarko)

Hace 1 año, 4 meses

Hola @amandapandashop

Elimine lo siguiente de su .htaccess

<FilesMatch “.(ttf|otf|eot|woff|woff2|svg)$”>
<IfModule mod_headers.c>
SetEnvIf Origin “http(s)?://(cdn|sub).domain.com$” AccessControlAllowOrigin=$0
Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
Header merge Vary Origin
</IfModule>

Reemplace la <AllowedHeader>Authorization</AllowedHeader> le * con su CORSConfiguration o puede usar su nombre de dominio real en su lugar *

Lanzador de hilos

(@amandapandashop)

Hace 1 año, 3 meses

Hola Marko Perdón por el retraso. Todavía no funciona. 1) Eliminé esto de .htaccess: SetEnvIf Origin “http (s)?: // (cdn | sub) . dominio .com $ «AccessControlAllowOrigin = $ 0 Encabezado agregar Access-Control-Allow-Origin% {AccessControlAllowOrigin} e env = AccessControlAllowOrigin Encabezado para fusionar Vary Origin 2. Reemplace la configuración CORS para que ahora aparezca: http://s3.amazonaws.com/doc/2006-03-01/ páginas>; https://domain.com; OBTENER 3000 * Anfitrión

Esta respuesta fue modificada hace 1 año, 3 meses. Lanzador de hilos

(@amandapandashop)

Hace 1 año, 3 meses

Hola Marko Perdón por el retraso. Todavía no funciona. 1) Eliminé esto de .htaccess: SetEnvIf Origin “http (s)?: // (cdn | sub) . dominio .com $ «AccessControlAllowOrigin = $ 0 Encabezado agregar Access-Control-Allow-Origin% {AccessControlAllowOrigin} e env = AccessControlAllowOrigin Encabezado para fusionar Vary Origin 2. Se reemplazó la configuración de CORS, por lo que ahora aparece: http://s3.amazonaws.com/doc/2006-03-01/ páginas>; https://dominio.com; OBTENER 3000 * Anfitrión 3. luego limpie los archivos que tienen el conflicto CORS

Sin embargo, esto todavía no funciona. ¿Consejo por favor?

Lanzador de hilos

(@amandapandashop)

Hace 1 año, 3 meses

Hola Marko, veo que otros tienen este problema con respecto a los errores de CORS y la configuración y las fuentes como yo https://wordpress.org/support/topic/cdn-cloudfront-and-webfonts/

Plicy CORS se ve así: http://s3.amazonaws.com/doc/2006-03-01/ páginas>; * OBTENER 3000 * Anfitrión >

Mi archivo .htaccess tiene lo siguiente: # BEGIN W3TC CDN Encabezado de conjunto Access-Control-Allow-Origin «*» # FIN W3TC CDN

El comportamiento de My Cloud Front está destinado a «solo https» y el encabezado en blanco del «encabezado». Todos los archivos con un problema de política CORS no son válidos. He borrado los cachés y borrado CDN en W3TC

Ya no sé qué hacer. Por favor consejo.

(@vmarko)

Hace 1 año, 3 meses

Hola @amandapandashop

¿Está utilizando o impulsando una CDN de CloudFront? Si cargó en el depósito s3, debe establecer la política CORS y luego verificar CORS documentación en AWS. ¡Espero que esto ayude!

Lanzador de hilos

(@amandapandashop)

Hace 1 año, 3 meses

Estoy usando la tracción de CloudFront y agregué la política CORS al segmento S3. Creo que las imágenes funcionan perfectamente. Sin embargo, son estas fuentes las que crean los problemas:

wp-content / plugins / elementor / assets / lib / font-awesome / webfonts / fa-brands-400.woff2 wp-content / plugins / elementor / assets / lib / font-awesome / webfonts / fa-solid-900.woff2 wp-content / plugins / elementor / assets / lib / font-awesome / webfonts / fa-brands-400.woff wp-content / plugins / elementor / assets / lib / font-awesome / webfonts / fa-solid-900.woff wp-content / plugins / elementor / assets / lib / font-awesome / webfonts / fa-brands-400.ttf wp-content / plugins / elementor / assets / lib / font-awesome / webfonts / fa-solid-900.ttf wp-content / plugins / ti-woocommerce-wishlist / assets / fonts / tinvwl-webfont.ttf wp-content / plugins / ti-woocommerce-wishlist / assets / fonts / tinvwl-webfont.woff wp-content / theme / oceanwp / assets / fonts / simple-line-icons / Simple-Line-Icons.woff2 wp-content / themes / oceanwp / assets / fonts / simple-line-icons / Simple-Line-Icons.ttf wp-content / theme / oceanwp / lujo resources / fonts / simple-line-icons / Simple-Line-Icons.woff wp-content / themes / oceanwp / assets / fonts / fontawesome / fontawesome-webfont.woff wp-content / theme / oceanwp / assets / fonts / fontawesome / fontawesome-webfont.ttf wp-content / theme / oceanwp / assets / fonts / fontawesome / fontawesome-webfont.woff

Intenté borrarlos de CloudFront, pero no tengo ninguna duda: ¿Tengo que cargarlos en el depósito? No sé qué hacer. Gracias de antemano por su amable ayuda con este tema.

Lanzador de hilos

(@amandapandashop)

Hace 1 año, 3 meses

Hola, hice una búsqueda más en línea y descubrí que mi cdn.domain.com encontró todas las imágenes y fuentes. Por otro lado, las fuentes y las imágenes parecen ser servidas localmente desde domain.com. ¿Tiene alguna sugerencia adicional? Tuyo sinceramente,

(@vmarko)

Hace 1 año, 3 meses

Hola @amandapandashop

En su entorno, nginx maneja esos archivos mientras PHP está en apache. es decir, las reglas de Apache no tienen posibilidad de actuar. Debe agregar las siguientes reglas a su nginx.conf en su raíz:

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

O pídale a su proveedor de alojamiento que actualice las reglas por usted. ¡Háganos saber si ayuda!

(@vmarko)

Hace 1 año, 3 meses

Resuelto en esta publicación https://wordpress.org/support/topic/cdn-cloudfront-and-webfonts/