Configuración de CORS (Intercambio de Recursos de Origen Cruzado) para un sitio web

¿Qué es CORS?

El Intercambio de Recursos de Origen Cruzado (CORS) es un mecanismo basado en cabeceras HTTP para relajar las restricciones de los navegadores sobre las solicitudes de origen cruzado. En términos simples, cuando una página web (por ejemplo, una en example.com) intenta solicitar recursos de un dominio diferente (por ejemplo, api.example.net), el navegador de forma predeterminada bloquea esta solicitud debido a la política de mismo origen. CORS permite que el servidor añada cabeceras específicas en la respuesta para indicar al navegador qué orígenes pueden acceder a los recursos, permitiendo así un acceso seguro entre dominios.

¿Por qué usar CORS?

Cuando tu aplicación frontend (por ejemplo, una SPA que se ejecuta en app.example.com) necesita obtener datos de una API backend (por ejemplo, que se ejecute en api.example.com), es probable que necesites utilizar CORS.

Detalles de los parámetros de CORS

A continuación se presentan algunos de los parámetros comúnmente usados en CORS y su función:

1. Access-Control-Allow-Origin:

   • Función: Especifica los orígenes permitidos para acceder a los recursos.
   • Valores:
     • *: Permite solicitudes de cualquier dominio (no recomendado para entornos de producción debido a razones de seguridad).
     • https://example.com: Permite solo solicitudes de https://example.com.
     • https://example.com https://www.example.net: Permite solo solicitudes de https://example.com y https://www.example.net.
   • Importante: Cuando la solicitud incluye un encabezado de Authorization, Access-Control-Allow-Origin no puede ser *, debe configurarse a un dominio específico, de lo contrario, la solicitud de origen cruzado fallará.

2. Access-Control-Allow-Methods:

   • Función: Especifica los métodos HTTP permitidos (como GET, POST, PUT, DELETE).
   • Valores: Por ejemplo, GET, POST, PUT, DELETE, OPTIONS.
   • Importante: Si tu solicitud incluye encabezados personalizados, o utiliza métodos PUT o DELETE, debes declarar aquí que OPTIONS está permitido, de lo contrario, el navegador enviará primero una solicitud de pre verificación OPTIONS y si la respuesta de la pre verificación no incluye el método OPTIONS permitido, tu solicitud fallará.

3. Access-Control-Allow-Headers:

   • Función: Especifica los encabezados HTTP personalizados que se pueden utilizar en la solicitud.
   • Valores: Por ejemplo, Content-Type, Authorization.
   • Importante: Si tu solicitud incluye encabezados personalizados, debes declararlos aquí como permitidos, de lo contrario, el navegador bloqueará tu solicitud.

4. Access-Control-Allow-Credentials:

   • Función: Indica si se permite que las solicitudes de origen cruzado incluyan Cookies o información de autenticación HTTP.
   • Valores: true o false.
   • Importante: Cuando se establece en true, el valor de Access-Control-Allow-Origin no puede ser un comodín *.

Activar y configurar CORS en ServBay

ServBay proporciona una interfaz conveniente para configurar la configuración de CORS de tu sitio web, los pasos son los siguientes:

1. Seleccionar sitio web: En la barra de navegación izquierda de la interfaz principal de ServBay, haz clic en la opción "Sitio web".
   Selecciona el sitio web para el cual deseas configurar CORS de la lista.

2. Acceder a la configuración de CORS: Dentro de la interfaz de configuración del sitio web, busca la sección "CORS". Por defecto, ServBay tendrá CORS desactivado, y necesitas activarlo manualmente cambiando el interruptor de "desactivado" a "activado".

3. Configurar Access-Control-Allow-Origin: En el campo de entrada Access-Control-Allow-Origin, introduce los dominios permitidos para acceder, se pueden separar múltiples dominios con espacios. Por ejemplo: https://servbay.new https://www.servbay.com https://www.servbay.dev https://www.servbay.cn https://appleid.apple.com.

4. Configurar Access-Control-Allow-Methods: En el campo de entrada Access-Control-Allow-Methods, introduce los métodos HTTP que deseas permitir. Por ejemplo: GET, POST, PUT, DELETE, OPTIONS.

5. Configurar Access-Control-Allow-Headers: En el campo de entrada Access-Control-Allow-Headers, introduce los encabezados que deseas permitir. Por ejemplo: Content-Type, Authorization.

6. Activar Allow-Credentials (opcional): Si necesitas permitir que las solicitudes de origen cruzado incluyan Cookies o información de autenticación, activa el interruptor de Allow-Credentials. Por favor ten en cuenta que si habilitas esta opción, el valor de Access-Control-Allow-Origin no puede ser un comodín *.

7. Guardar configuración: Una vez completada la configuración, haz clic en el botón "Guardar" en la esquina inferior derecha para aplicar tus cambios.

Ejemplo

Según la captura de pantalla anterior, la configuración de CORS en el sitio "ServBay Testing" es la siguiente:

• Access-Control-Allow-Origin: https://servbay.new https://www.servbay.com https://www.servbay.dev https://www.servbay.cn https://appleid.apple.com
• Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
• Access-Control-Allow-Headers: Content-Type, Authorization
• Allow-Credentials: Habilitado.

Esto significa que las solicitudes de los dominios anteriores pueden acceder a los recursos del sitio servbay.new, y se pueden enviar solicitudes usando los métodos GET, POST, PUT, DELETE, OPTIONS, incluyendo los encabezados Content-Type y Authorization así como información de Cookies.

Consideraciones

• Seguridad: En un entorno de producción, evita usar un comodín * como valor para Access-Control-Allow-Origin.
• Caché: Los navegadores pueden almacenar en caché las respuestas de CORS, así que después de cambiar la configuración de CORS, es posible que necesites borrar la caché de tu navegador.
• Configuración de código: En algunas ocasiones, además de configurar CORS en el servidor web, también deberás configurarlo en el código (Laravel).
• Escenarios complejos: Para escenarios más complejos de origen cruzado, puede que necesites combinar CORS con otras técnicas, como JSONP o servidores proxy.

Siguiendo estos pasos, podrás activar y configurar CORS fácilmente para tu sitio web en ServBay, asegurando que tus solicitudes de origen cruzado se procesen correctamente.

Espero que este documento te ayude a entender y utilizar mejor la funcionalidad de CORS en ServBay. No dudes en hacer cualquier pregunta que tengas.