什么是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深似海，大家且行且珍惜吧。頭發，保重[謝謝]

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。