什么是API請求構(gòu)建工具

在移動(dòng)互聯(lián)網(wǎng)時(shí)代，面向多端開發(fā)成為主流，需要向用戶提供如：安卓App、蘋果App、WAP、小程序、Web網(wǎng)頁等等多種應(yīng)用入口，這些入口稱為前端。而為不同前端提供數(shù)據(jù)和業(yè)務(wù)信息的系統(tǒng)稱為后端。前端與后端會(huì)約定數(shù)據(jù)通訊的方式，通常采用的是RESTful API的方式，也可以采用socket rpc的或者GraphQL的方式。

由于前后端開發(fā)的模式越來越成熟，前后端開發(fā)的工作可以完全同時(shí)進(jìn)行，只要前后端開發(fā)者協(xié)商好前后端程序?qū)拥臉?biāo)準(zhǔn)即可。這就要求系統(tǒng)測試者需要有一種工具可以在系統(tǒng)完全開發(fā)完成之前就可以對后端提供的數(shù)據(jù)接口進(jìn)行訪問測試。這也就是API&HTTP工具誕生的由來。我們暫時(shí)把這種工具叫做：“API請求構(gòu)建工具”。

市面上常見的API請求構(gòu)建工具有幾種：獨(dú)立的桌面程序、命令行程序、瀏覽器擴(kuò)展、Web服務(wù)等。著名的API請求構(gòu)建工具有Postman、Swagger Inspecter、Soap UI、Apigee等等。國內(nèi)有一些公司也通過Web服務(wù)的方式提供API測試功能，例如網(wǎng)易數(shù)帆的GoAPI。當(dāng)然不需要圖形界面也可以直接選擇用curl這樣的免費(fèi)工具進(jìn)行HTTP API測試。

---

什么是Hoppscotch

Hoppscotch是一種可以通過Web服務(wù)的方式構(gòu)建API訪問的工具。

之前介紹的很多API請求構(gòu)建工具都是商業(yè)軟件，或者免費(fèi)版僅僅提供很有限的功能。其中曾經(jīng)最流行的Postman在收費(fèi)之后就很被開發(fā)者社區(qū)詬病。

有位印度裔小哥Liyas Thomas對此極為不爽，就發(fā)布了一個(gè)新的工具叫：Postwoman，顯而易見，Postwoman是專懟Postman的。

同樣Postwoman提供了Http訪問測試和API請求構(gòu)建功能，并且充分考慮到現(xiàn)在云應(yīng)用會(huì)涉及到的多種網(wǎng)絡(luò)請求構(gòu)建的場景，除了基本的Http RESTful訪問之外，還提供了Socket.io、EventSourcee、MQTT、GraphQL等多種請求的構(gòu)建方式。

等等……這些和Hoppscotch有什么關(guān)系？

相信很多人也都猜到了，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

體驗(yàn)地址：https://hoppscotch.io

---

讓Hoppscotch跑起來

可能由于Liyas小哥是個(gè)設(shè)計(jì)師&前端開發(fā)者，所以Hoppscotch使用Nodejs開發(fā)，允許在本地安裝運(yùn)行，并可以通過PWA的方式安裝為應(yīng)用。本文由于篇幅的關(guān)系，不討論P(yáng)WA安裝的部分，僅介紹如何將Hoppscotch在本地安裝。

接下來直接進(jìn)入正題。

a，環(huán)境準(zhǔn)備

由于Hoppscotch基于Nodejs，所以需要安裝Nodejs環(huán)境，具體方法請移步https://nodejs.org。

包管理器可以選擇npm也可以用yarn。

個(gè)人推薦yarn，所以要npm i -g yarn來安裝yarn。

為了讓yarn跑得更快，啟用yarn國內(nèi)源：yarn config set registry https://registry.npm.taobao.org/

當(dāng)然，git工具是必不可少的。

b，代碼準(zhǔn)備

運(yùn)行g(shù)it clone https://github.com/hoppscotch/hoppscotch，克隆Hoppscotch代碼庫到本地，如果覺得Github太慢，可以用我在Gitee上的fork：https://gitee.com/bison-fork/hoppscotch

進(jìn)入克隆下來的代碼目錄(應(yīng)該是：hoppscotch)，

然后執(zhí)行yarn或npm install命令安裝依賴包。

c，運(yùn)行

執(zhí)行npm run dev或者yarn run dev命令即可馬上運(yùn)行啟動(dòng)Web服務(wù)。

通過瀏覽器打開本機(jī)ip的3000端口即可訪問。例如：http://127.0.0.1:3000或http://你本機(jī)ip:3000。

如果打算把Hoppscotch作為一個(gè)Web應(yīng)用部署到其他機(jī)器，可以運(yùn)行npm|yarn run build命令構(gòu)建靜態(tài)文件，然后用npm|yarn run start 命令可以直接運(yùn)行靜態(tài)文件查看效果。

d，發(fā)現(xiàn)個(gè)問題

當(dāng)看到酷酷的界面出來，可能你就迫不及待輸入了一些網(wǎng)址或者API地址進(jìn)行測試，結(jié)果彈出來個(gè)紅彤彤的：Network Error，頓時(shí)整個(gè)人就不好了。開始懷疑人生，Hoppscotch這破工具不能開箱即用？

我翻了一下Hoppscotch倉庫的issue，遇到這問題的人真的不少，其實(shí)這也是官方文檔語焉不詳?shù)牡胤健?/p>

其實(shí)這是Hoppscotch防止CORS跨域訪問機(jī)制導(dǎo)致的問題。Hoppscotch本身是一個(gè)Web應(yīng)用，所以訪問其他網(wǎng)址的時(shí)候，本質(zhì)上就是CORS。那么怎么辦？

e，解決問題

接下來我們來說要怎么解決這個(gè)問題。

首先官方是提供了解決方案的，就是提供瀏覽器擴(kuò)展來覆蓋CORS限制規(guī)則。

我們以Firefox瀏覽器為例，先安裝Firefox擴(kuò)展開發(fā)工具web-ext：npm i -g web-ext，或者yarn global add web-ext。

接下來獲取瀏覽器擴(kuò)展代碼：git clone https://github.com/hoppscotch/hoppscotch-extension，當(dāng)然我在Gitee上也準(zhǔn)備了一份fork：https://gitee.com/hoppscotch/hoppscotch-extension。

進(jìn)入代碼目錄，應(yīng)該是hoppscotch-extension。

接下來很重要：

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

"*://*/*",

結(jié)果如圖：

執(zhí)行npm|yarn build命令。

進(jìn)入生成的dist目錄，執(zhí)行Firefox擴(kuò)展打包命令：web-ext build。

Firefox的擴(kuò)展應(yīng)該生成在web-ext-artifacts目錄下。

接下來安裝擴(kuò)展。

打開Firefox瀏覽器，按下Ctrl+Shift+A快捷鍵打開Firefox擴(kuò)展管理界面，點(diǎn)擊右上角設(shè)置按鈕，選擇“從文件安裝附加組件...”，找到剛剛打包好的文件，然后一路安裝下去即可。

結(jié)果如圖：

接下來在Hoppscotch界面確認(rèn)擴(kuò)展已經(jīng)安裝成功，在setting界面可以看到extension部分顯示了Firefox擴(kuò)展的版本號(hào)，這個(gè)時(shí)候就可以盡情訪問各種網(wǎng)址了。

一切剛剛開始

裝好Hoppscotch才是一切的開始，至于怎么樣玩好Hoppscotch那會(huì)是另外一篇文章了。期待各位同行能多多實(shí)踐。

一入IT深似海，大家且行且珍惜吧。頭發(fā)，保重[謝謝]

總結(jié)

以上是生活随笔為你收集整理的postman跨域测试_安装使用Hoppscotch构建API请求访问与测试的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。