当前位置：首页 > 区块链技术 > web调用api接口实例

如何实现在纯Web端完成各类API调试？

2023-06-02 15:43:56 | 来源：CSDN | 作者：张涛
这篇文章主要介绍了如何实现在纯Web端完成各类API调试？的相关资料,需要的朋友可以参考下本文详细内容介绍

在软件开发过程中，对于各类 API 的调试工作至关重要。API 调试是验证和测试应用程序接口的有效性和正确性的关键步骤。传统的 API 调试方法通常依赖于独立的工具或桌面应用程序，限制了调试过程的灵活性和效率。

为推动 API 调试向更便捷、高效的方向发展，越来越多的开发人员开始寻求在纯 Web 端完成各类 API 调试的解决方案。纯 Web 端的 API 调试具有许多优势，包括无需安装额外软件、跨平台支持、便于团队协作等。本文将以开源项目 AREX 为例为大家介绍如何在 Web 端实现对各类 API 的调试功能。

AREX （http://arextest.com/）是一款开源的基于真实请求与数据的自动化回归测试平台，利用 Java Agent 技术与比对技术，通过流量录制回放能力实现快速有效的回归测试。同时提供了接口测试、接口比对测试等丰富的自动化测试功能。

难点一：跨域限制

要想在纯 Web 端实现各类 API 的调试工作，首先要解决的难题是处理浏览器的跨域限制。

什么是跨域

浏览器跨域问题是指在 Web 开发中，当使用 JavaScript 代码从一个域名的网页访问另一个域名的资源时会遇到的限制。浏览器实施了一种安全策略，称为同源策略（Same-Origin Policy）， 用于保护用户信息的安全。同源策略要求网页中的 JavaScript 只能访问与其来源（协议、域名和端口号）相同的资源，而对于不同域名的资源访问会受到限制。

由于浏览器存在跨域限制，我们不能在浏览器端随心所欲地发送 HTTP 请求，这是浏览器的安全策略决定的。

解决方案

经调研，突破此限制的方法有两种：分别是 Chrome 插件代理和服务端代理，以下是两种方法的比较。

权衡下来 AREX 选择了 Chrome 插件代理的方法，其原理是利用了 Chrome 插件中 background 可以发送跨域请求的能力，我们将浏览器端拦截到的请求通过 window.postmassage 与 Chrome 插件的 background 进行通信（其中通信还需要 Chrome 插件的 content-script 作为数据桥梁）。

具体实现如下：

在页面脚本中

生成一个随机的字符串，并将其转换为字符串形式，存储在 tid 变量中。

使用 window.postMessage() 方法发送一条消息到其他扩展程序，消息包括一个类型为 `AREX_EXTENSION_REQUEST` 的标识、tid、以及 params 参数。

添加一个 message 事件监听器 receiveMessage，用于接收其他扩展程序发送的消息。

在 receiveMessage 函数中，检查接收到的消息是否为类型为 AREX_EXTENSION_RES，并且 tid 与之前发送的消息的tid 相匹配。如果匹配成功，则移除事件监听器。

在内容脚本中

在后台脚本中

难点二：API 调试

上述已经解决了跨域问题，接下来就是如何实现 API 调试的功能。

解决方案

Postman 是业内成熟的 API 调试工具，我们站在了 Postman 这位巨人的肩膀上，在 AREX 中引入了 Postman 的 JavaScript 沙盒，使用它的沙盒运行前置脚本、后置脚本以及断言来调试 API。

以下是 AREX 请求的流程图：

当点击发送请求的时候，会将表单中的数据汇聚到一起，数据结构为：

这是 AREX 的数据结构，我们会将其转换成 Postman 的数据结构。之后调用 PostmanRuntime.Runner() 方法，将转换好了的 Postman 数据结构和当前所选的环境变量传入，Runner 会执行 preRequestScript 和 testScript 脚本。`preRequestScript` 发生在请求之前，可以在其中穿插请求以及对请求参数、环境变量进行操作，`testScript` 发生在请求之后，可以对 response 返回数据进行断言操作，并且脚本中也可以通过 `console.log` 输出数据，在控制台进行调试。

在 Postman 沙盒中也存在跨域问题，由于 Postman 沙盒的集成度非常高，为了确保与 PostmanRuntime 的同步以及方便性，我们采用了 Ajax 拦截技术。通过在浏览器端拦截 Ajax 请求，我们可以对请求进行修改、添加自定义逻辑或者进行其他处理操作。这样可以实现对请求和响应的全局控制和定制化。

当 Postman 沙盒发送请求时，会携带一个名为 "postman-token" 的请求头。我们拦截到这个 Ajax 请求后，会将请求参数进行拼装，并通过 window.postMessage 发送给浏览器插件。浏览器插件再次构建 fetch 请求，将数据返回给 Postman 沙盒，使其输出最终结果，包括响应（response）、测试结果（testResult）和控制台日志（console.log）。需要注意的是，responseType 必须指定为 arraybuffer。

具体流程如下：

使用 xspy.onRequest() 方法注册一个请求处理程序。这个处理程序接受两个参数：request 和 sendResponse。request 参数包含请求的相关信息，例如方法、URL、头部、请求体等。sendResponse 是一个回调函数，用于发送响应给请求方。

在处理程序中，通过检查请求的头部中是否存在 postman-token 来判断请求是否来自 Postman。

如果存在该头部，表示请求是通过 Postman 发送的。则使用 AgentAxios 发起一个新的请求，使用原始请求的方法、URL、头部和请求体。AgentAxios 返回一个 agentData 对象，其中包含了响应的状态码、头部和数据等信息。创建一个名为 dummyResponse 的响应对象，包含了与原始请求相关的信息。dummyResponse 的 status 字段为 agentData 的状态码，headers 字段为将 agentData 的头部数组转换为对象格式的结果，ajaxType 字段为字符串 xhr，responseType 字段为字符串 arraybuffer，response 字段为将 agentData 的数据转换为 JSON 字符串并用 Buffer 包装的结果。最后，使用 sendResponse(dummyResponse) 将响应发送给请求方。

如果请求不是来自 Postman，则直接调用 sendResponse()，表示不返回任何响应。

难点三：二进制对象序列化传递

还有一点值得一提，对于 `x-www-form-urlencoded` 和 `Raw` 类型的请求，由于它们都是普通的 JSON 对象，处理起来比较容易。但是对于 `form-data` 和 `binary` 类型的请求，需要支持传输二进制文件负载。然而，Chrome 插件的 `postMessage` 通信方式不支持直接传递二进制对象，导致无法直接处理这两种类型的请求。

解决方案

为了解决这个问题，AREX 采用了 base64 编码技术。在用户选择文件时，AREX 会将二进制文件转换为 base64 字符串，然后进行传输。在 Chrome 插件端，AREX 会将 base64 数据进行解码，并用于构建实际的 `fetch` 请求。这样可以绕过直接传递二进制对象的限制。

就这个问题我们采用了 base64 编码技术，在选择文件时我们会将二进制文件转换成 base64 字符串，再进行传输，Chrome 插件端会将 base64 数据解码并用于构建实际的 `fetch` 请求。

这个流程图描述了将 FormData 中的二进制文件转换为 Base64 字符串，并通过 Chrome 插件代理将其转换回文件并进行进一步处理的过程。

form-data binary（A）：表示一个包含二进制文件的 FormData 表单数据。

FileReader（B）：使用 FileReader 对象来读取二进制文件。

readAsDataURL base64 string：FileReader 使用 readAsDataURL 方法将二进制文件读取为 Base64 字符串。

Chrome 插件代理（C）：Base64 字符串经过读取操作后，传递给 Chrome 插件代理进行进一步处理。

base64 string：表示经过 FileReader 读取二进制文件后得到的 Base64 字符串。

Uint8Array（D）：在 Chrome 插件代理中，将 Base64 字符串转换为 Uint8Array。

File（E）：使用 Uint8Array 的数据创建一个新的 File 对象。

fetch（F）：将新创建的 File 对象通过 fetch 方法或其他方式进行进一步处理，例如上传到服务器或进行其他操作。

代码分析

以下是代码层面的分析：

toBase64 函数接受一个 File 对象作为参数，并返回一个 Promise 对象，该 Promise 对象将解析为表示文件的 Base64 字符串。

在函数内部，创建了一个 FileReader 对象。通过调用 reader.readAsDataURL(file) 将文件读取为 Data URL。当读取操作完成时，通过 reader.onload 事件处理程序将读取结果解析为字符串，并使用 resolve 将其传递给 Promise。如果发生错误，将使用 reject 将错误传递给 Promise。base64ToFile 函数接受两个参数：dataurl（Base64 字符串）和 filename（文件名），并返回一个 File 对象。

首先，将 dataurl 使用逗号分割成数组 arr，如果分割结果为空，则将其设为包含一个空字符串的数组。通过正则表达式匹配 arr[0] 中的内容，提取出 MIME 类型，即数据的类型。

使用 atob 将 Base64 字符串解码为二进制字符串 bstr。创建一个长度为 n 的 Uint8Array 数组 u8arr。使用循环遍历 bstr，将每个字符的 Unicode 编码放入 u8arr 中。

最后，使用 File 构造函数创建并返回一个新的 File 对象，其中包含了从 u8arr 中读取的文件数据、文件名和 MIME 类型。导出 base64ToFile 函数，以便在其他地方使用。

以上就是如何实现在纯Web端完成各类API调试？的详细内容，更多关于web调用api接口实例的资料请关注脚本之家其它相关文章！

免责声明：本文只为提供市场讯息，所有内容及观点仅供参考，不构成投资建议，不代表本站观点和立场。投资者应自行决策与交易，对投资者交易形成的直接或间接损失，作者及本站将不承担任何责任。！
Tag：Web   API  

你可能感兴趣的文章

币圈快讯

  • 伊朗称制定敌方目标与资产新清单

    2026-11-01 05:47
    11月1日，伊朗武装部队总参谋长阿卜杜拉希当地时间10月31日警告称，如果美国和以色列再对伊朗实施军事打击，伊朗的回应将“更为严厉且有效”，“一份新的敌方目标与资产清单已被列入议程”。阿卜杜拉希称，这份目标与资产清单“覆盖广泛地理范围”，为抵御侵略，伊朗武装部队将以“高强度且不受地理限制”的方式对抗美以——一旦爆发新战事，伊朗将是决定战争何时结束的一方。#伊朗最高领袖要求更新打击目标库#伊朗最高领袖穆杰塔巴·哈梅内伊当天发表声明说，他会见了伊朗武装力量高级指挥官，并下令针对任何可能的美国和以色列威胁，都必须予以“即时、有力且不受地理限制的回应”。（CCTV国际时讯）

  • 布伦特原油暗盘跌破112美元日内跌超0.3%

    2026-11-01 05:07
    11月1日，布伦特原油暗盘跌破112美元，日内跌超0.3%。（新浪财经）

  • 美国个人储蓄率9月份下降0.2个百分点至4.2%创2022年10月以来最低水平

    2026-11-01 04:41
    11月1日，据TheKobeissiLetter披露，美国个人储蓄率9月份下降0.2个百分点至4.2%，创下2022年10月以来的最低水平。自2024年1月以来，美国个人储蓄率已累计下降3.4个百分点。目前，个人储蓄率已远低于疫情前五年6.2%的平均水平。与此同时，9月美国个人收入同比增长4.1%，为2022年4月以来第二低的增速。同期，个人消费支出（PCE）同比增长6.3%，为2024年12月以来第二高的同比增幅。换言之，消费者支出增速持续超过收入增长，进一步挤压家庭储蓄，并使家庭对借贷的依赖程度上升。持续高企的通胀和处于历史高位的物价，也在进一步侵蚀消费者的储蓄。

  • 《华尔街日报》胜诉特朗普100亿美元诽谤诉讼被驳回

    2026-11-01 04:38
    11月1日，美国一名联邦法官驳回了唐纳德·特朗普重新提起的、针对《华尔街日报》的100亿美元诽谤诉讼，并裁定该案不得再次起诉，这是特朗普在与媒体的法律纠纷中遭遇的又一次挫折。迈阿密法官DarrinGayles于周六批准了《华尔街日报》的撤诉申请。诉状指控该报在一篇关于特朗普与已故杰弗里·爱泼斯坦往来的报道中对其构成诽谤。Gayles曾在4月以证据不足为由首次驳回该案，但当时允许特朗普补充诉求后重新起诉。特朗普在5月提交新版本诉状，而《华尔街日报》认为新版本并未做出有效完善。这项裁决对《华尔街日报》、其母公司新闻集团以及名誉主席鲁珀特·默多克（均为该案被告）而言是重大胜利。被告方在撤诉申请中称，相关报道内容属实，特朗普提起诉讼意在压制媒体对他的批评。引发这起诉讼的《华尔街日报》报道称，特朗普曾向爱泼斯坦寄送一封带有暗示性内容的生日信件。（新浪财经）

  • Name.com域名劫持事件升级：15个客户域名受影响并全部恢复其中10个与Vercel平台相关

    2026-11-01 04:08
    11月1日，Name.com向TheBlock表示，此次攻击中共有15个客户域名被劫持，超过此前确认的12个，目前这些域名已全部恢复。Vercel则表示，受影响的域名中有10个与其平台相关联。此前消息，周五晚些时候，黑客入侵了十余个DeFi网站，包括Flap、Kintsu、PickleFinance和OrigamiFinance，并利用这些网站清空了访问者的加密货币钱包。据TheBlock获取的注册记录显示，这12个被劫持的域名均通过Name.com注册，其中10个已于周六上午在注册商层面被暂停。TheBlock迄今已将约13.8万美元的被盗资金追踪到EVM链上的三个钱包，这一数字尚未计入Solana或Aptos链上的任何损失。
    • 查看更多

最新资讯

更多

区块链百科