使用 Logic 发起 HTTP 通信

开始之前： 查看逻辑概述以熟悉逻辑。

利用 HTTP 请求是访问外部资源和增强网站交互性的有效机制。您可以使用 Webflow Logic 的 创建 HTTP 通信 阻止寻求信息 从 或传达信息 到 外部应用程序。随后，您可以在工作流程中的以下步骤中使用响应数据——促进 Logic 与外部应用程序的无缝集成。 

在本教程中，您将掌握：

1. HTTP 请求由什么组成？
2. HTTP 请求的组成
3. 如何监督身份验证凭证
4. HTTP 响应的组成
5. 如何测试启动 HTTP 通信块
6. 常见问题和解决方案

HTTP 请求由什么组成？ 

HTTP，即超文本传输协议，是一种用于在互联网上传输数据的协议。互联网包括托管在众多服务器上的资源（例如 HTML 文件、样式表、脚本、图像等）。HTTP 请求使我们能够访问这些资源。

为了访问互联网上的内容，您的浏览器（或“客户端”）需要向这些服务器发送请求以获取所需的资源。从服务器收到请求的资源后，浏览器会继续向您展示这些资源。HTTP 请求允许您查看 这 当前页面！ 

当您在浏览器的地址栏中输入“webflow.com”（或任何其他 URL）时，您的浏览器会向服务器传输 GET 请求以检索网页，以便在浏览器中显示它。 得到 请求表示客户端可以访问的一种 HTTP 方法，用于请求资源。本教程的后面部分将进一步探讨其他常见的请求方法（POST、PUT、PATCH 和 DELETE）。 

利用逻辑执行 HTTP 请求

在 Logic 领域，您可以自动向 API 发送 HTTP 请求。API 或应用程序编程接口本质上充当中介，促进两个不同应用程序之间的通信 - 在这种情况下，您的 Logic 工作流和外部技术框架（即用于增强您网站的工具和服务的融合）。例如，您可以从 Airtable 请求记录以纳入您的工作流，或将数据从您的 Webflow 站点发送到 Airtable。API 使您能够执行 CRUD 操作并增强您的应用程序。 

CRUD 操作表示软件应用程序应该能够执行的 4 个基本操作 - 创建、读取、更新和删除。用户需要具备创建数据、读取数据（即在应用程序用户界面内访问数据）、更新或修改数据以及删除数据的能力。您可以将 Webflow CMS 视为 CRUD 应用程序，您可以在其中创建、查看（读取）、修改（更新）和删除 CMS 项目。 

流行的 HTTP 请求方法对应 CRUD 操作：

为了使用现实世界的比较来说明，API 类似于银行，其中 CRUD 操作与银行可行的活动相似。当您访问银行时，您可以访问（读）有关您的可用资金和交易的记录，存款（创造）资金存入您的账户， 更新 您的帐户详细信息，并提款（删除) 从您的账户中提取资金。在银行进行任何这些活动之前，您必须通过身份证明进行身份验证，并向银行说明您的意图——与 API 交互的原则也类似。 

入门

要启动 Logic 中发起 HTTP 请求的过程： 

1. 使用权 逻辑面板 > 流程 > 流程编辑器
2. 拖动 创建 HTTP 通信 将方块放到画布上

HTTP 请求的组成

HTTP 请求 应该 包括：

• 请求方法
• 请求 URL 和端点路径

此外，HTTP 请求可能包含：

• 验证
• 请求主体
• 请求标头
• 查询字符串

验证

与在银行出示身份证明类似，许多 API 要求您在寻求资源时进行身份验证并确认您的身份。身份验证有三种选择：

• 无（指不需要身份验证的 API）
• API 令牌
• 用户名密码

评论： 所需的特定身份验证凭据取决于您向其发送请求的 API，因此您需要参考相应的 API documentation 来获取此信息。每个 API 的结构都不同，并且并非每种身份验证格式都与所有 API 一致。 

深入了解有关管理身份验证凭据的更多细节。

如何包含 API 令牌凭证

API 令牌（有时称为“API 密钥”或“访问令牌”）类似于密码，用于指示向 API 发出 HTTP 请求的站点或应用程序。Logic 中部署的所有 API 令牌均安全存储。

基本的： 必须注意的是，尽管 Webflow 安全地存储凭证，但 Webflow 无法控制通过 Logic 工作流接收该凭证的任何服务器或第三方服务。 

评论： 您可以选择在请求标头或查询参数中包含 API 令牌，这取决于您要将请求定向到的 API 的要求。 

在请求标头中

开始之前： 请参阅 documentation 以了解用于接收请求的 API。这有助于确定如何以及在何处生成 API 令牌，以及如何构造请求标头。标头值所采用的名称（例如授权、X-API-Key 等）取决于接收请求的 API。进一步研究请求标头。

要在请求标头中附加 API 令牌凭证： 

1. 复制你的 API 令牌 为接收您的请求的 API 分配
2. 使用权 逻辑面板 > 流程 标签 > 流程编辑器 Webflow内
3. 选择 创建 HTTP 通信 在画布上进行遮挡以揭开 阻止设置
4. 选择 API 令牌 在……之中确认 选择器
5. 挑选 标题 来自 包括 选择器
6. 在中插入标题的值（例如授权、X-API-Key 等） 标头 盒子 
7. 按 选择凭证 以下 鉴别
8. 按 添加新标识 
9. 在以下位置命名您的 API 密钥（例如，Airtable API 密钥） 标题 框中提供摘要 定义 如果需要 
10. 选择 API 密钥 来自 种类 选择器
11. 粘贴你的 API 密钥 进入 验证 盒子
12. 按 产生

基本的： 如果你发送请求的 API 需要 Bearer 验证，则需要在 代币 在您的 API 密钥 (例如 Bearer {token}) 之前的框。

添加 API 密钥后，您可以从 鉴别 未来 HTTP 请求的选择器。

在查询参数内

开始之前： 请参阅您发送请求的 API 的 documentation。这将有助于识别如何以及在何处生成 API 密钥以及如何格式化查询参数。查询参数使用的键值对由您发送请求的 API 决定。了解有关查询参数的更多信息。

要将 API 密钥凭证合并到查询参数中： 

1. 复制你的 API 密钥 对于你发送请求的 API
2. 揭晓 合理化面板 > 潮流 标签 > 作品编辑 在 Webflow
3. 选择 API 密钥 来自 确认 选择器
4. 选择 咨询 来自 包括 选择器
5. 在查询参数中插入键（例如，key=value 中的“key”，或 api_key=value 中的“api_key”） 查询参数 盒子
6. 按 选择凭证 以下 鉴别
7. 按 添加新标识 
8. 在 标题 框中，添加摘要 定义 如果需要
9. 粘贴你的 API 密钥 进入 验证 框 — 这将作为键值对中的值
10. 按 产生

基本的： 仅应将键值对中的键（例如，key=value 中的“key”）添加到 查询参数 框。该值（即您的 API 密钥）将自动附加到请求中的查询参数。请记住，密钥将根据您发送请求的 API 而有所不同，因此请参阅第三方的 API documentation 了解此详细信息。 

添加 API 密钥后，您可以从 鉴别 用于未来 HTTP 请求的选择器。

如何整合用户名和密码识别

某些 API 可能需要使用用户名和密码（而不是 API 密钥）进行验证。Logic 使用的所有用户名和密码均会得到安全保管。 

基本的： 虽然 Webflow 可以安全地存储验证，但 Webflow 无法控制您使用逻辑流将该验证传输到的任何服务器或第三方服务。 

包含用户名和密码标识：  

1. 揭晓 合理化面板 > 潮流 标签 > 作品编辑 在 Webflow
2. 选择 发出 HTTP 请求 块在画布上打开其 阻止设置
3. 选择 用户名密码 来自 确认 选择器
4. 按 选择凭证 以下 鉴别
5. 按 添加新标识
6. 在 标题 框中，添加摘要 定义 如果需要
7. 选择 用户名密码 在里面 种类 选择器
8. 在 用户名 和 密码 框（用户名和密码来自外部服务） 
9. 按 产生

输入您的用户名和密码后，您可以从 鉴别 用于未来 HTTP 请求的选择器。

请求 URL 和端点路径 

每个 HTTP 请求都必须包含一个请求 URL 和端点路径，以指示您将请求定向到的服务器。 

例如，要在 Mailchimp 中创建新联系人，请使用 Mailchimp API，你需要向 https://{区域}.api.mailchimp.com/3.0/lists/{listID}/members。在本例中，请求 URL 是 https://{区域}.api.mailchimp.com/3.0 端点路径为 /列表/{列表ID}/成员. 

您可以在 网址 盒子的 发出 HTTP 请求阻止设置。您也可以点击紫色“点”图标以将动态数据（例如，来自先前块的输出数据）包含到您的请求 URL。 

笔记： 请求 URL 和端点路径将根据您发送请求的 API 而有所不同，因此您需要参考第三方 API documentation 来了解此详细信息。

查询字符串

查询字符串是 URL 的一个可选组件，它允许您通过将信息添加到 URL 末尾来与服务器之间传递信息。查询字符串通常位于 URL 中的问号 (?) 之后，可以包含一个或多个参数作为键值对。等号 (=) 分隔每个键和值（例如，key=value），而与号 (&) 分隔多个参数（例如，key1=value1&key2=value2）。它们可用于验证（例如，将 API 密钥添加到查询参数）或转发动态数据（例如，通过表单提交生成的数据）。 

假设你打算利用 电影数据库 API 查找有关电影《Hot Rod》的详细信息。您需要向 https://api.themoviedb.org/3/search/movie?api_key={api_key}&query=Hot+Rod. 在这种情况下， api_key和 搜索 是关键词， {令牌} 代表真正的 API 令牌，并且 快+车 表示另一个值。这些关键字和值组成了 2 个参数，共同构成了查询字符串： ?token={token}&搜索=Fast+Car. 

点击紫色“点”图标 网址 领域的 配置 HTTP 请求 阻止设置，您可以将动态数据（例如，来自先前块的结果数据）集成到查询参数中。

笔记： 您在 HTTP 请求中包含的参数类型（如果有）及其结构将依赖于您将请求转发到的 API，因此建议查阅外部 API documentation 以了解此见解。 

请求技巧

HTTP 请求方法描述了请求的操作。后续请求方法可在 配置 HTTP 请求 堵塞： 

• 得到
• 邮政
• 放
• 修补
• 删除

得到

可以利用 得到 请求技术来获取或读取资源。繁荣的 得到 请求产生一个包含所需信息的响应主体。 

例如， 得到 请求擅长检索有关 Mailchimp 中的订阅/受众的数据，或 Airtable 数据库中所有表的枚举。 

邮政

这 邮政 请求技术对于在外部服务或数据库中制作新资源非常有用。 邮政 请求需要一个请求主体，您在其中定义要构建的资源的数据。 

假设您希望在 Webflow 网站上收集新闻通讯订阅者，并将他们发送到 Mailchimp 列表。您可以设计一个工作流程，其中包含表单提交触发器和 配置 HTTP 请求 块传达 邮政 向 Mailchimp 发送请求。此场景中的请求主体将封装发往 Mailchimp 的表单提交数据。 

放

这 放 请求技术对于更改或更新资源非常方便。如果没有现有资源与更新请求相协调，则会出现新资源。许多第三方服务要求您在您的请求中包含现有记录 ID 或唯一标识符 放 请求指示要修改的记录，而不是他们的系统对现有记录的存在执行裁决。

基本的： 这 放 请求技术替代 全部的 请求的资源与请求主体中的数据一致。这意味着任何未指定的值都将覆盖更新资源的当前值——在特定情况下是一种潜在的危险。对于更新 部分 由于需要对现存资源进行一些额外的修改，同时保持其余部分不变，因此建议使用 PATCH 请求技术。

如果目标是更新 Airtable 中的现有记录，则可以传输 放 向 Airtable 发送请求，同时将 Airtable 中的整个记录（即包含所有单元格值和当前记录 ID 的完整布局）以及请求正文中的预期修改附加到其中。如果记录在 Airtable 中尚不存在，则请求将伪造一条新记录。如果记录已在 Airtable 中，并且请求正文中任何现有单元格值仍为空，则请求将取代现有记录 — 这意味着先前填充的单元格值将在请求执行后变为无效。 

修补

这 修补 请求技术反映了 放 然而， 修补 允许修改或更新 部分 资源的更新，而不是整个资源的更新。要更新的数据必须仅包含在请求主体中。

例如，如果在不改变其他属性的情况下调整 Airtable 中现有记录的描述属性，则 修补 可以发送仅携带记录 ID 和记录的预期描述的请求。 修补 请求仅调整记录的指定字段，而其他属性保持不变。 

删除 

这 删除 请求用于擦除资源。 

例如，可以发起 删除 向 Mailchimp 请求拆解受众，或向 Hubspot 请求从监控中解救多余的潜在客户。

请求描述符

请求描述符会生成有关 HTTP 请求的上下文，以便服务器能够做出适当的响应。例如，在 GET 请求中，请求描述符可以指定所需的响应格式，或者在 POST 请求中，它们可以指示正在转发的数据类型。 

笔记： HTTP 请求中的请求描述符（如果有）根据您请求指定的 API 而有所不同，因此建议查阅外部 API documentation 以了解具体信息。 

在请求标头中包含 发送 HTTP 请求 模块： 

1. 使用权 发送 HTTP 请求模块设置 > 一般的 > 标头 
2. 点击“加“ 象征 
3. 指定标头的名称和值

要删除请求标头，只需单击“垃圾“ 图标。

提醒： 如果您创建标题时未输入名称和值，Flow 编辑器会将其保存为未知值。建议删除未识别的标题以防止出现问题。您可以通过单击“垃圾”图标位于标题旁边。

请求数据

请求数据包含您打算随请求传输到服务器的信息。例如，在 POST 请求中，它可能是您希望生成的实体。对于某些请求，请求正文的存在不是强制性的 - 例如当通过 GET 请求获取资源时，无需在正文中指定内容。 请求数据 部分可见于 发送 HTTP 请求模块设置 > 一般的 当选择需要请求主体的方法（例如，POST，PUT 或 PATCH）时。 

您将使用 JSON（JavaScript 对象表示法）构造请求主体。JSON 是一种基于文本的数据格式，包含用双引号括起来并用冒号分隔的键/值对，例如： 

“姓名”：“Rod Kimble”

构成请求主体的 JSON 对象可能包含多个键/值对，以逗号分隔。例如： 

{ “姓名”：“Rod Kimble”，“职业”：“特技演员” }

至关重要的： 任何多余的逗号、省略的冒号或缺失的引号都可能导致 JSON 文件无效，从而导致请求失败。由于手动解析 JSON 的复杂性，使用免费工具（如 JSONLint 建议进行验证。 

您可以通过单击紫色“点”图标 正文（JSON） 字段。支持的数据类型包括： 

• 清楚的
• 电子邮件
• 电话 
• 数字
• 文本区域
• Checkbox
• 时间戳

笔记： 请求主体中包含的具体内容将依赖于您向其发送请求的 API；因此，咨询第三方 API documentation 对于获取此信息至关重要。 

管理身份验证凭据

凭证（例如 API 令牌、用户名、密码等）安全地存储在 Webflow 中 — 在传输和静止时均经过加密。一旦建立了凭证，即使是其创建者也无法在 Webflow UI 中访问其实际值；只有分配给所创建凭证的用户定义名称可见。 

至关重要的： 虽然 Webflow 确保凭证的安全存储，但它并不管理通过逻辑流接收这些凭证的任何服务器或第三方服务。 

添加新凭证

要引入新凭证，请导航至 阻止设置 > 验证 > 选择凭证 并选择 添加新凭证。包含凭证的过程根据凭证类型（例如，API 令牌或用户名和密码）而有所不同。 

并得到服务器的批准。以“2”开头的代码表示胜利响应。

200 正常 是成功 HTTP 请求的标准答复，但答复可能根据请求方法而有所不同。 201 已创建例如，对成功最常见的回答是 邮政 要求。 

查看 MDN documentation 上的成功响应.

重定向响应

重定向状态代码表明客户端需要采取额外步骤来完成 HTTP 请求。如果请求有多个潜在响应，或者请求的资源的 URL 已被永久更改，则可能会发生这种情况。以“3”开头的代码表示重定向响应。 

探索有关重定向响应的 MDN documentation.

客户端错误响应

客户端错误状态代码表示服务器由于客户端触发的问题而无法或不会处理请求。这意味着请求者（即您）一方存在问题。客户端错误状态代码可能用于响应语法错误、缺少必要的身份验证、发送到不存在的资源等请求。以“4”开头的代码表示客户端错误响应。 

请参阅有关客户端错误响应的 MDN documentation.

服务器错误响应

服务器错误响应表明服务器未能完成请求或无法完成请求。这表明第三方服务端存在问题。以“5”开头的代码表示服务器错误响应。 

阅读有关服务器错误响应的 MDN documentation.

响应标头

响应头是包含响应额外上下文的 HTTP 头，例如有关响应服务器、数据类型、主机地址等的详细信息。 

响应正文

HTTP 请求成功后，响应主体将包括：

• 客户端请求的资源，或 
• 有关客户端请求的操作状态的一些详细信息

如果 HTTP 请求失败，响应主体可能会提供：

• 进一步了解错误的原因，或 
• 客户应采取哪些行动来完成他们的请求

并非所有回复都会有回复正文。 

如何测试 Make HTTP 请求块

您可以独立测试 发出 HTTP 请求 与其他工作流程隔离开来，从而简化故障排除。 

评估 发出 HTTP 请求 堵塞： 

1. 使用权 逻辑面板 > 流程 标签 > 流程编辑器 
2. 右键单击 发出 HTTP 请求 在画布上进行选择 测试此动作或选择 发出 HTTP 请求 在画布上进行阻止并点击 运行测试 完成设置 在 阻止设置
3. 在模态菜单窗口中输入样本数据
4. 按 运行测试

了解有关测试工作流程的更多信息。

测试 HTTP 请求的其他资源

您可以利用以下免费服务 webhook.site 或者 requestbin.com 测试 HTTP 请求。这些服务提供示例 API 端点，因此您可以验证您的请求而无需实际传输任何数据。 

您还可以利用 邮差，一款免费的 API 客户端，用于深入研究 API 端点并测试 HTTP 请求。这可以帮助您从 Logic 外部调试您的请求。 

常见问题和疑难解答

我的 HTTP 请求不够，但我不确定原因。 

您可以依赖响应状态代码（有时还有响应主体）来提供有关 HTTP 请求失败原因的更多见解 - 例如，它可能由于客户端错误或服务器错误而失败。 

如果您收到客户端错误响应，则您的请求可能有缺陷。使用类似以下免费工具验证您的 JSON 可能会有所帮助 JSONLint 解决任何语法错误。 

您还可以测试个人 发出 HTTP 请求 块，以便更轻松地排除故障。了解如何测试 Make HTTP 请求块。 

如果您仍然不确定 HTTP 请求失败的原因，请联系您发送请求的第三方服务以获取更多支持和资源。 

如果你认为你遇到了与 Make HTTP 请求块本身有关的问题，请 与我们的客户支持团队联系以获取帮助。请确保包含您的 流 ID 与您的提交。 

PUT 和 PATCH 有什么对比？ 

PUT 请求将构造一个 新鲜的 如果无法找到要更新的指定资源，则 PUT 请求技术会将整个请求的资源替换为请求正文中的数据。这意味着任何未指定的值都将覆盖您更新的资源的现有值 — 这在某些情况下可能是有害的。 

使用 PATCH 请求，您可以修改 部分 通过仅显示您想要更新的数据来更新资源。 

其他工作区成员可以查看我包含的任何凭据（例如第三方 API 密钥、用户名和密码）吗？ 

工作区成员可以管理、使用和查看凭证的片段。但是，一旦建立了凭证，包括该凭证的原始创建者在内的任何人都无法在 Webflow UI 中查看凭证的实际值。实际上，工作区成员可以查看所创建凭证的用户定义名称，但无法访问 API 令牌或用户名和密码的实际值。

Webflow 如何存储和管理凭证？ 

凭证存储安全 — 传输过程中始终加密，静止时也始终加密。凭证建立后，包括凭证的原始创建者在内的任何人都无法在 Webflow UI 中查看凭证的实际值。您只能查看所创建凭证的用户定义名称。 

请注意，虽然 Webflow 安全地存储凭证，但 Webflow 并不管理您使用逻辑流将凭证传输到的任何服务器。 

当网站被复制或转移时凭证会发生什么情况？ 

站点复制或转移后，凭证不会保留。站点复制或转移后，流程中使用的任何凭证都需要重新建立。