Cómo configurar CORS (Compartición de Recursos de Origen Cruzado) para sitios web en ServBay

En el desarrollo web moderno, las aplicaciones frontend (que suelen ejecutarse en un dominio) a menudo necesitan acceder a APIs u otros servicios backend (que pueden funcionar en diferentes dominios o puertos). Por seguridad, la política de mismo origen del navegador bloquea por defecto estas solicitudes cruzadas. CORS (Compartición de Recursos de Origen Cruzado) es un mecanismo estándar que permite a los servidores declarar qué orígenes pueden acceder a sus recursos, habilitando así interacciones seguras entre diferentes dominios.

En este artículo aprenderás cómo configurar y habilitar fácilmente CORS para tu sitio web en el entorno local de desarrollo de ServBay usando su interfaz gráfica.

¿Qué es CORS?

CORS (Compartición de Recursos de Origen Cruzado) es un mecanismo basado en cabeceras HTTP que permite que un servidor indique qué orígenes (dominios, protocolos o puertos), además del propio, pueden cargar sus recursos. Cuando una página web intenta solicitar recursos desde un origen distinto, el navegador ejecuta una “solicitud HTTP cruzada”. Según la política de mismo origen, este tipo de solicitudes se bloquean por defecto. CORS proporciona un canal para que el servidor y el navegador negocien si se permite o no esa solicitud.

¿Por qué los desarrolladores deben configurar CORS?

Si desarrollas una aplicación frontend-backend desacoplada (por ejemplo, el frontend en app.servbay.demo y la API backend en api.servbay.demo), o si tu frontend consume APIs de terceros, el navegador bloqueará estas solicitudes por la política de mismo origen. Configurar CORS le dice al navegador que el servidor permite solicitudes desde un origen autorizado, solucionando así los errores de acceso causados por la política de mismo origen.

Cabeceras HTTP clave en CORS

Cuando el servidor responde a una solicitud cruzada, incluye ciertas cabeceras de respuesta HTTP Access-Control-*. El navegador del cliente usa estos valores para decidir si aprobar o no la petición. A continuación, se describen los parámetros CORS principales que puedes configurar en ServBay (corresponden a estas cabeceras):

1. Access-Control-Allow-Origin

   • Función: Es la cabecera CORS más importante, especifica qué orígenes (uno o varios dominios) pueden acceder al recurso.
   • Valores:
     • *: Permite solicitudes de cualquier origen. Atención: aunque cómodo, no se recomienda usar * en producción, ya que habilita acceso universal y supone riesgos de seguridad.
     • https://servbay.demo: Solo permite solicitudes de este origen específico.
     • https://servbay.demo https://api.servbay.demo: Permite múltiples orígenes, separados por espacio.
   • Nota: Si la solicitud cruzada debe incluir Cookies o credenciales (Access-Control-Allow-Credentials: true), NO se puede usar *, sino que deben especificarse los orígenes concretos.

2. Access-Control-Allow-Methods

   • Función: Especifica los métodos HTTP permitidos en solicitudes cruzadas (GET, POST, PUT, DELETE, OPTIONS, etc.).
   • Valores: Por ejemplo: GET, POST, PUT, DELETE, OPTIONS. Múltiples métodos separados por coma.
   • Nota: Para las “solicitudes no simples” (por ejemplo, uso de PUT, DELETE o cabeceras personalizadas), el navegador primero enviará una “solicitud preflight” con el método OPTIONS. El servidor debe responder incluyendo Access-Control-Allow-Methods, indicando los métodos realmente permitidos. Por eso, normalmente conviene incluir OPTIONS.

3. Access-Control-Allow-Headers

   • Función: Especifica qué cabeceras HTTP personalizadas pueden enviarse en solicitudes cruzadas.
   • Valores: Por ejemplo: Content-Type, Authorization, X-Requested-With. Múltiples cabeceras separadas por coma.
   • Nota: Si tu frontend usa cabeceras fuera de las “simples” (Accept, Accept-Language, Content-Language, Content-Type con ciertos valores), el navegador enviará una solicitud preflight y debes listar explícitamente aquí las cabeceras personalizadas permitidas.

4. Access-Control-Allow-Credentials

   • Función: Indica si se permiten solicitudes cruzadas con credenciales del usuario: Cookies, certificados SSL del cliente o autenticación HTTP.
   • Valores: true o false.
   • Nota: Si se activa (true), como se explicó antes, el valor de Access-Control-Allow-Origin NO puede ser *. Además, el cliente (JavaScript en navegador) debe enviar el indicador correcto (xhr.withCredentials = true o fetch(url, { credentials: 'include' })).

Cómo habilitar y configurar CORS en ServBay

ServBay ofrece una interfaz gráfica intuitiva para configurar de forma independiente CORS en cada sitio web. Sigue estos pasos:

1. Abre ServBay y navega a la lista de sitios: Inicia ServBay. En la barra lateral izquierda de la interfaz principal, haz clic en "Sitios". Verás la lista de todos los sitios locales configurados en ServBay.

2. Selecciona el sitio que deseas configurar: Busca en la lista el sitio para el que desees habilitar y configurar CORS. Haz clic en su nombre para acceder a la pantalla de configuración.

3. Localiza y habilita la opción CORS: En la página de configuración, desplázate hacia abajo hasta la sección de "CORS". Por defecto, CORS está deshabilitado. Haz clic en el interruptor junto a la sección para cambiarlo a “activado”. Ahora las opciones estarán habilitadas para su edición.

4. Configura Access-Control-Allow-Origin: En el campo "Access-Control-Allow-Origin", escribe uno o varios orígenes que quieras autorizar. Para varios orígenes, sepáralos por espacio. Ejemplo: https://frontend.servbay.demo https://anotherapp.servbay.demo. Evita usar * en ambientes productivos.

5. Configura Access-Control-Allow-Methods: En el campo "Access-Control-Allow-Methods", introduce los métodos HTTP permitidos, separados por coma. Ejemplo: GET, POST, PUT, DELETE, OPTIONS. Asegúrate de incluir todos los métodos que emplea tu aplicación y, por norma general, incluye OPTIONS para solicitudes preflight.

6. Configura Access-Control-Allow-Headers: En el campo "Access-Control-Allow-Headers", introduce la lista de cabeceras HTTP personalizadas autorizadas, separadas por coma. Ejemplo: Content-Type, Authorization, X-Custom-Header. Incluye únicamente las cabeceras que tu app usa realmente.

7. Configura Access-Control-Allow-Credentials (opcional): Si necesitas autorizar el envío de Cookies o credenciales, activa el interruptor junto a "Allow-Credentials". Recuerda: al habilitar esto, el paso 4 (Access-Control-Allow-Origin) no puede ser *.

8. Guarda tu configuración: Una vez terminada la configuración de CORS, haz clic en el botón "Guardar" (abajo a la derecha) para aplicar los cambios. ServBay actualizará automáticamente la configuración del servidor web correspondiente (Caddy o Nginx) sin que necesites reiniciar manualmente.

Ejemplo de configuración

La siguiente imagen muestra un ejemplo de configuración de CORS para el sitio “ServBay Demo Website” en ServBay:

Según la configuración mostrada arriba:

• Access-Control-Allow-Origin: https://frontend.servbay.demo https://api.servbay.demo
• Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
• Access-Control-Allow-Headers: Content-Type, Authorization
• Allow-Credentials: Activado (true)

Esto significa que solo las solicitudes desde https://frontend.servbay.demo y https://api.servbay.demo podrán acceder a los recursos de “ServBay Demo Website”. Estas solicitudes podrán usar los métodos GET, POST, PUT, DELETE, OPTIONS, enviar las cabeceras Content-Type y Authorization, y podrán incluir credenciales (como cookies).

Recomendaciones y buenas prácticas

• La seguridad es primordial: Es tentador usar Access-Control-Allow-Origin: * en desarrollo o pruebas, pero en producción restringe los orígenes solo a los estrictamente necesarios para mayor seguridad.
• Solicitudes preflight: Entender cómo funcionan las preflight (método OPTIONS) es clave para depurar problemas de CORS. Verifica que tu servidor (mediante la configuración de ServBay) responda con las cabeceras requeridas.
• Caché del navegador: Los navegadores pueden almacenar en caché la política de CORS. Si tras modificar la configuración en ServBay sigues teniendo problemas, limpia la caché de tu navegador o prueba en modo incógnito.
• CORS a nivel de aplicación: Algunos frameworks o librerías web (Laravel, Express.js, Spring Boot, etc.) permiten configurar CORS desde la aplicación. La configuración desde ServBay aplica a nivel de servidor web (Caddy/Nginx) y suele tener prioridad. Si tienes entornos complejos, revisa las dos capas de configuración.
• Herramientas de depuración: Usa las herramientas de desarrollador del navegador (normalmente F12, pestaña Red) para revisar las cabeceras HTTP en las solicitudes cruzadas. Esto te ayudará a confirmar si CORS está bien configurado y a detectar fallos con precisión.

Preguntas Frecuentes (FAQ)

P: He seguido los pasos y CORS no funciona, ¿por qué las solicitudes siguen fallando?

R: Revisa lo siguiente:

1. Verifica la consola y la pestaña de red del navegador: Normalmente el navegador muestra errores de CORS en la consola y en la pestaña Red puedes inspeccionar todas las cabeceras de solicitud y respuesta. Asegúrate de que tu respuesta incluye correctamente las cabeceras Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers y que los valores coincidan con tu frontend.
2. Revisa los orígenes: Que el origen (protocolo, dominio, puerto) en Access-Control-Allow-Origin coincida exactamente con el de tu frontend.
3. Métodos y cabeceras: Que Access-Control-Allow-Methods incluya el método usado y Access-Control-Allow-Headers las cabeceras personalizadas que tu aplicación envía.
4. Credenciales: Si necesitas enviar cookies u otras credenciales, asegúrate que Allow-Credentials está activado y que Access-Control-Allow-Origin no es *. Además, tu frontend debe configurar el envío de credenciales (por ejemplo, withCredentials = true).
5. Preflight: Para no solicitudes simples, verifica que se envía la petición OPTIONS y que el servidor responde con las cabeceras CORS necesarias.
6. Guardar en ServBay: Asegúrate de hacer clic en “Guardar” tras cualquier cambio en la configuración de ServBay.

P: ¿Se puede establecer una política CORS global para todos los sitios?

R: La configuración de CORS en ServBay es por sitio, lo que ofrece mayor flexibilidad y seguridad. Actualmente la interfaz de ServBay no permite una política global; si quieres políticas similares en varios sitios, debes aplicarlas en cada uno.

P: ¿Cómo implementa ServBay la configuración de CORS?

R: ServBay utiliza Caddy o Nginx como servidor web subyacente. Tus ajustes en la interfaz de ServBay se traducen automáticamente a las directivas de configuración correspondientes en los archivos Caddyfile o Nginx. ServBay gestiona estos archivos y recarga los servidores según convenga, sin que tengas que editarlos manualmente.

Resumen

Gracias a la interfaz gráfica intuitiva de ServBay puedes activar y configurar fácilmente CORS en tus sitios locales, resolviendo los problemas de acceso entre dominios. Comprender y ajustar correctamente las cabeceras clave como Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers y Access-Control-Allow-Credentials es fundamental para solicitudes cruzadas seguras y exitosas. Sigue las recomendaciones y buenas prácticas de esta guía para optimizar tu experiencia de desarrollo web local.