什么是API请求构建工具

在移动互联网时代，面向多端开发成为主流，需要向用户提供如：安卓App、苹果App、WAP、小程序、Web网页等等多种应用入口，这些入口称为前端。而为不同前端提供数据和业务信息的系统称为后端。前端与后端会约定数据通讯的方式，通常采用的是RESTful API的方式，也可以采用socket rpc的或者GraphQL的方式。

由于前后端开发的模式越来越成熟，前后端开发的工作可以完全同时进行，只要前后端开发者协商好前后端程序对接的标准即可。这就要求系统测试者需要有一种工具可以在系统完全开发完成之前就可以对后端提供的数据接口进行访问测试。这也就是API&HTTP工具诞生的由来。我们暂时把这种工具叫做：“API请求构建工具”。

市面上常见的API请求构建工具有几种：独立的桌面程序、命令行程序、浏览器扩展、Web服务等。著名的API请求构建工具有Postman、Swagger Inspecter、Soap UI、Apigee等等。国内有一些公司也通过Web服务的方式提供API测试功能，例如网易数帆的GoAPI。当然不需要图形界面也可以直接选择用curl这样的免费工具进行HTTP API测试。

什么是Hoppscotch

Hoppscotch是一种可以通过Web服务的方式构建API访问的工具。

之前介绍的很多API请求构建工具都是商业软件，或者免费版仅仅提供很有限的功能。其中曾经最流行的Postman在收费之后就很被开发者社区诟病。

有位印度裔小哥Liyas Thomas对此极为不爽，就发布了一个新的工具叫：Postwoman，显而易见，Postwoman是专怼Postman的。

同样Postwoman提供了Http访问测试和API请求构建功能，并且充分考虑到现在云应用会涉及到的多种网络请求构建的场景，除了基本的Http RESTful访问之外，还提供了Socket.io、EventSourcee、MQTT、GraphQL等多种请求的构建方式。

等等……这些和Hoppscotch有什么关系？

相信很多人也都猜到了，Hoppscotch就是Postwoman。2020年8月，Liyas小哥可能觉得一直怼Postman也挺low的，2020年8月决定改名叫Hoppscotch了。

Hoppscotch的Github地址在：https://github.com/hoppscotch/hoppscotch

我也在Gitee上fork了一份：https://gitee.com/bison-fork/hoppscotch

体验地址：https://hoppscotch.io

让Hoppscotch跑起来

可能由于Liyas小哥是个设计师&前端开发者，所以Hoppscotch使用Nodejs开发，允许在本地安装运行，并可以通过PWA的方式安装为应用。本文由于篇幅的关系，不讨论PWA安装的部分，仅介绍如何将Hoppscotch在本地安装。

接下来直接进入正题。

a，环境准备

由于Hoppscotch基于Nodejs，所以需要安装Nodejs环境，具体方法请移步https://nodejs.org。

包管理器可以选择npm也可以用yarn。

个人推荐yarn，所以要npm i -g yarn来安装yarn。

为了让yarn跑得更快，启用yarn国内源：yarn config set registry https://registry.npm.taobao.org/

当然，git工具是必不可少的。

b，代码准备

运行git clone https://github.com/hoppscotch/hoppscotch，克隆Hoppscotch代码库到本地，如果觉得Github太慢，可以用我在Gitee上的fork：https://gitee.com/bison-fork/hoppscotch

进入克隆下来的代码目录(应该是：hoppscotch)，

然后执行yarn或npm install命令安装依赖包。

c，运行

执行npm run dev或者yarn run dev命令即可马上运行启动Web服务。

通过浏览器打开本机ip的3000端口即可访问。例如：http://127.0.0.1:3000或http://你本机ip:3000。

如果打算把Hoppscotch作为一个Web应用部署到其他机器，可以运行npm|yarn run build命令构建静态文件，然后用npm|yarn run start 命令可以直接运行静态文件查看效果。

d，发现个问题

当看到酷酷的界面出来，可能你就迫不及待输入了一些网址或者API地址进行测试，结果弹出来个红彤彤的：Network Error，顿时整个人就不好了。开始怀疑人生，Hoppscotch这破工具不能开箱即用？

我翻了一下Hoppscotch仓库的issue，遇到这问题的人真的不少，其实这也是官方文档语焉不详的地方。

其实这是Hoppscotch防止CORS跨域访问机制导致的问题。Hoppscotch本身是一个Web应用，所以访问其他网址的时候，本质上就是CORS。那么怎么办？

e，解决问题

接下来我们来说要怎么解决这个问题。

首先官方是提供了解决方案的，就是提供浏览器扩展来覆盖CORS限制规则。

我们以Firefox浏览器为例，先安装Firefox扩展开发工具web-ext：npm i -g web-ext，或者yarn global add web-ext。

接下来获取浏览器扩展代码：git clone https://github.com/hoppscotch/hoppscotch-extension，当然我在Gitee上也准备了一份fork：https://gitee.com/hoppscotch/hoppscotch-extension。

进入代码目录，应该是hoppscotch-extension。

接下来很重要：

修改目录下的manifest.json文件，在content_scriptsmatches部分增加一行：

"*://*/*",

结果如图：

执行npm|yarn build命令。

进入生成的dist目录，执行Firefox扩展打包命令：web-ext build。

Firefox的扩展应该生成在web-ext-artifacts目录下。

接下来安装扩展。

打开Firefox浏览器，按下Ctrl+Shift+A快捷键打开Firefox扩展管理界面，点击右上角设置按钮，选择“从文件安装附加组件...”，找到刚刚打包好的文件，然后一路安装下去即可。

结果如图：

接下来在Hoppscotch界面确认扩展已经安装成功，在setting界面可以看到extension部分显示了Firefox扩展的版本号，这个时候就可以尽情访问各种网址了。

一切刚刚开始

装好Hoppscotch才是一切的开始，至于怎么样玩好Hoppscotch那会是另外一篇文章了。期待各位同行能多多实践。

一入IT深似海，大家且行且珍惜吧。头发，保重[谢谢]