目的

启用 CORS 的主要目标：

• 允许前端应用程序和 CRM 之间进行安全的跨域通信。
• 启用来自客户端应用程序或外部门户的 webhook API 调用。
• 防止浏览器端 CORS 错误。
• 保护 CRM 数据免受未经授权的域的侵害。

技术实施

在 API 设计器中创建 Webhook API 时，可以选择 添加域 到配置中。此域代表将从 Vtiger 发出请求或接收数据的来源（网站或应用程序）。 

添加域后：

• Vtiger 将 允许跨域请求 来自该域。
• webhook API 将启动 成功接收数据 来自 CRM。
• 浏览器将阻止来自 非白名单域名.

此设置确保 webhook API 可以安全地按预期运行，而无需后端代理或变通方法，同时仍然可以控制哪些域可以与 Vtiger 交互。

例如：

如果托管在 https://app.example.com 上的 Web 应用程序尝试向 https://api.vtiger.com 上的 API 发送请求，则浏览器将阻止该请求，除非 API 通过 CORS 标头明确允许该请求。

为了使这种交互成为可能且安全，服务器必须使用特殊的标头（如 Access-Control-Allow-Origin）进行响应，以告知浏览器哪些来源（域）被允许访问它。

对于 Vtiger 来说，启用 CORS 白名单 允许受信任的域与 CRM 交互（例如发送 webhook 请求或调用 API），而不会被浏览器阻止。

用例

您有一个托管在 https://portal.mycompany.com 上的前端应用程序，该应用程序需要将 webhook API 请求发送到 https://crm.mycompany.com 上的 Vtiger CRM 实例。

市场问题

浏览器由于 CORS 错误阻止了请求：从来源“https://portal.mycompany.com”访问“https://crm.mycompany.com/webhook”的操作已被 CORS 策略阻止。

解决方案 将 https://portal.mycompany.com 添加到 Vtiger 中的 CORS 白名单。之后，浏览器将允许该请求，因为响应将包含正确的标头。

优点

• 防止前端应用程序中与 CORS 相关的请求失败。
• 允许从受信任的域安全且受控地访问 Vtiger API。
• 支持与 React、Angular、Vue 等现代前端框架集成。
• 无需后端代理来处理 API 通信。
• 通过管理界面轻松管理和更新。

我们相信这些示例将改善您使用 Vtiger CRM 的体验。我们希望确保开发人员和 CRM 用户可以相互共享信息和知识，以进一步提高 CRM 的功能。 

敬请期待。祝您编码愉快！

注册以接收最新更新！