Guía de configuración de CORS para API de webhook en el Diseñador de API

El Intercambio de Recursos entre Orígenes (CORS) es un mecanismo de seguridad del navegador que impide que las páginas web realicen solicitudes a un dominio distinto del que las generó. Esto se hace para proteger a los usuarios de sitios web maliciosos que intentan acceder a datos confidenciales de otro sitio sin permiso.

Resumen

El Diseñador de API de Vtiger se creó como una potente herramienta que sirve como banco de trabajo para que los desarrolladores creen fácilmente API personalizadas basadas en HTTP. Estas API se integran perfectamente con las API de JavaScript de VTAP o con aplicaciones externas.

Hemos añadido una función en el Diseñador de API para especificar los dominios permitidos (dominios que pueden incluirse en la lista blanca). Solo estos dominios podrán realizar solicitudes CORS.

Aprendamos más sobre CORS y su aplicación.

Objetivo

Los objetivos principales de habilitar CORS:

  • Permitir una comunicación segura entre orígenes entre las aplicaciones frontend y el CRM.
  • Habilite las llamadas a la API de webhook desde aplicaciones del lado del cliente o portales externos.
  • Evite errores CORS del lado del navegador.
  • Proteja los datos de CRM de dominios no autorizados.

Implementación técnica

Al crear una API de Webhook en el Diseñador de API, hay una opción para añadir un dominio A la configuración. Este dominio representa el origen (el sitio web o la aplicación) que realizará solicitudes o recibirá datos de Vtiger. 

Una vez agregado el dominio:

  • Vtiger lo hará permitir solicitudes de origen cruzado de ese dominio.
  • La API del webhook se iniciará Recibiendo datos exitosamente desde el CRM.
  • El navegador bloqueará cualquier solicitud que provenga de dominios no incluidos en la lista blanca.

Esta configuración garantiza que la API de webhook pueda funcionar de forma segura según lo previsto sin requerir servidores proxy ni soluciones alternativas, al mismo tiempo que mantiene el control sobre qué dominios pueden interactuar con Vtiger.

Ejemplo

Si una aplicación web alojada en https://app.example.com intenta enviar una solicitud a una API en https://api.vtiger.com, el navegador bloqueará la solicitud a menos que la API lo permita explícitamente a través de encabezados CORS.

Para que esta interacción sea posible y segura, el servidor debe responder con encabezados especiales (como Access-Control-Allow-Origin) que le indican al navegador qué orígenes (dominios) tienen permitido acceder a él.

En el caso de Vtiger, habilitar Lista blanca de CORS permite que los dominios confiables interactúen con el CRM (por ejemplo, enviando solicitudes de webhook o llamando API) sin ser bloqueados por el navegador.

Caso de uso

Tiene una aplicación frontend alojada en https://portal.mycompany.com que necesita enviar solicitudes de API de webhook a su instancia de Vtiger CRM en https://crm.mycompany.com.

Primaria

El navegador bloquea la solicitud debido a un error CORS: el acceso para buscar en 'https://crm.mycompany.com/webhook' desde el origen 'https://portal.mycompany.com' ha sido bloqueado por la política CORS.

Solución Agregue https://portal.mycompany.com a la lista blanca de CORS en Vtiger. Después, el navegador permitirá la solicitud, ya que la respuesta incluirá los encabezados correctos.

Beneficios

  • Evita errores de solicitud relacionados con CORS en aplicaciones frontend.
  • Permite el acceso seguro y controlado a las API de Vtiger desde dominios confiables.
  • Admite la integración con marcos frontend modernos como React, Angular, Vue, etc.
  • Elimina la necesidad de que los servidores proxy de backend gestionen la comunicación API.
  • Fácil de administrar y actualizar a través de la interfaz de administración.

Creemos que estos ejemplos mejorarán su experiencia con Vtiger CRM. Queremos asegurarnos de que los desarrolladores y los usuarios de CRM puedan compartir información y conocimientos entre sí para mejorar la funcionalidad del CRM. 

Mantente atento para más información. ¡Feliz codificación!

 
 

¡Regístrese para recibir las últimas actualizaciones!