Introducción al Error de CORS en GraphQL de Magento 2
Cuando desarrollas aplicaciones headless utilizando Magento 2 y tecnologías front-end como React, Vue.js o Next.js, es muy común encontrarse con el molesto error de CORS (Cross-Origin Resource Sharing) en la consola del navegador al realizar peticiones al endpoint GraphQL. Este fallo ocurre porque el servidor web bloquea las solicitudes provenientes de un dominio, puerto o protocolo distinto al de la tienda principal por motivos de seguridad.
Causas Principales del Error de CORS en Magento
- Falta de cabeceras HTTP de control de acceso en la configuración del servidor web (Nginx o Apache).
- Configuración incorrecta de las URLs base (Base URL) en el panel de administración de Magento 2.
- Bloqueo preventivo por parte de módulos de seguridad o firewalls a nivel de aplicación.
Método 1: Configurar las Cabeceras CORS en Nginx
Si tu servidor web es Nginx (el recomendado para Magento 2), debes editar el archivo de configuración del host virtual para permitir las peticiones de origen cruzado hacia el endpoint /graphql.
- Abre el archivo de configuración de Nginx de tu tienda Magento.
- Busca el bloque de ubicación (location) que maneja PHP y añade las siguientes reglas condicionales:
location /graphql {
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '$http_origin' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type, X-Requested-With' always;
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain charset=UTF-8';
add_header 'Content-Length' 0;
return 204;
}
try_files $uri $uri/ /index.php$is_args$args;
}3. Guarda los cambios y verifica la sintaxis de Nginx con el comando sudo nginx -t.
4. Reinicia el servicio ejecutando sudo systemctl restart nginx.
Método 2: Configuración en servidores Apache
Si utilizas Apache, debes asegurarte de que el módulo mod_headers esté activo y añadir las directivas correspondientes en el archivo .htaccess ubicado en la raíz de tu instalación de Magento o en la configuración del VirtualHost.
- Abre tu archivo
.htaccessprincipal. - Agrega el siguiente fragmento de código para permitir el acceso mediante GraphQL:
<IfModule mod_headers.c>
<FilesMatch "\.(php)$">
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"
Header set Access-Control-Allow-Headers "Authorization, Content-Type"
</FilesMatch>
</IfModule>3. Guarda el archivo y limpia la caché de Magento ejecutando php bin/magento cache:clean desde la terminal SSH.