# 1. 說一下背景 在日常開發或者測試工作中，經常會因為下游服務不可用或者不穩定時，通過工具或者技術手段去模擬一個`HTTP Server`，或者模擬所需要的介面資料。 這個時候，很多人腦海裡，都會想到可以利用`Mock`技術來解決， 當說起`Mock`，對於發、測試來說，是老生常談的話題了，之前公眾號也分享過很多關於此類的技術文章。市面上`Mock`工具有很多，比如`Charles`、`Fiddler`，但這些雖然都能實現`Mock`，但是在操作上相對來說還是比較麻煩，抓了包才能修改返回結果。並且對於一些複雜的開發測試場景，也很難得到滿足。 今天就給大家推薦一款測試開發神器：**`Mockoon`**, 它採用的是非侵入式，能夠實時修改返回結果。 # 2. Mockoon介紹 `Mockoon` 被官方稱為：一款在地執行模擬API最簡單，最快的解決方案。無需遠端部署，無需帳戶，並且是開源的。 它是利用Electron構建的，可以在Windows（exe），Linux（deb，rpm，Appimage和Snap）和MacOS（dmg或brew）上使用。官網地址：`mockoon.com` **下載地址:** ``` https://mockoon.com/#download ``` **功能特點:**  從官網中可以看出，Mockoon 是一個可以通過圖形化介面幫我們快速搭建 API 服務的工具，並且支援資料模擬、路由解析、跨域訪問、HTTPS、自定義延時、Docker 等等各種你想要的功能，同時支援支援 Windows、Mac、Linux，頁面整體結構是這樣子的：  # 3. Mockoon基礎使用 `Mockoon`佈局，和 `PostMan` 有異曲同工之妙啊。  比如，在左側可以配置一個個請求列表，點進去可以在右側配置詳情，比如配置是 `GET` 還是 `POST` 請求，`path` 是什麼，`Response Body` 是什麼，`Response Headers` 是什麼，另外還有一些規則和基礎設定。  另外在最上面我可以配置執行的 `host` 和 `port`，然後左上角還有一個執行按鈕，一點就相當於啟動了 `Server` 了，啟動之後按鈕就會變成紅色，再按一下就會停止，比如這裡我就配置了執行在本地 **3000** 埠：  然後可以根據自定義需求，修改**響應Body**： ``` { "Templating example": "For more information about templating, click the blue 'i' above this editor", "users": [ {{# repeat (queryParam 'total' '10') }} { "userId": "{{ faker 'random.number' min=10000 max=100000 }}", "firstname": "{{ faker 'name.firstName' }}", "lastname": "{{ faker 'name.lastName' }}", "friends": [ {{# repeat (faker 'random.number' 5) }} { "id": "{{ faker 'random.uuid' }}" } {{/ repeat }} ] }, {{/ repeat }} ], "total": "{{queryParam 'total' '10'}}" } ``` 然後接下來配置跨域訪問，就加一個 Response Header（根據需要，可選）： ``` Access-Control-Allow-Origin: '*' ``` 然後點選左上角的執行按鈕就成了。 `Mockoon` 還提供了快捷訪問的功能，接著點右上角的開啟按鈕：  瀏覽器就打開了，然後資料就看到了：  這樣，我們通過非常簡單的視覺化配置就完成了 API Server 的搭建，熟練的話一分鐘就完成了。 # 4. Mockoon進階使用 有時，您可能只需要模擬API的一部分，然後將其餘部分轉發到現有的REST伺服器。幸運的是，您可以使用`Mockoon`做到這一點 通過單擊右上角的齒輪來開啟環境設定：  啟用代理模式，然後輸入要將轉發到的伺服器URL。在環境名稱的右側應出現一個小的盾牌圖示，指示已啟用代理模式：  `Mockoon`將攔截所有已定義的路由，並將任何其他請求轉發到代理模式設定中定義的伺服器。 瀏覽器開啟: `http://0.0.0.0:3000/api/aitest` 地址即可拿到結果，body中隨時修改內容都會立即生效，不需要再次啟動任何東西  開啟瀏覽器訪問：  這樣一個基本的`Mock`就實現了，下面我們來說下使用`LightProxy`工具做代理轉發 # 5. LightProxy工具 ### 5.1 簡介 `LightProxy` 是 阿里巴巴IFE 團隊開發的一款基於 `Electron` 和 `whistle` 的開源桌面代理軟體，可以自動完成證書安裝和代理設定，通過 HTTP 代理使用規則轉發、修改每一個請求和響應的內容。  **專案地址：** ``` https://github.com/alibaba/lightproxy ``` ### 5.2 它能幫你做什麼： - 抓包，包括無線場景抓包 - 實時 hosts 繫結 - 按規則轉發資源 - mock 介面，頁面等 - 修改請求和響應內容，例如在頁面中插入 script ，修改返回頭等 **一句話總結**：`LightProxy`是一款全能代理抓包工具，通過基於 `whistle` 的代理能力，能夠任意修改開發環境中的 request 和 response ,夠讓你隨心所欲的掌控自己當前的開發或者測試環境。 **本地開發：** ``` git clone https://github.com/alibaba/lightproxy cd lightproxy yarn run install-deps yarn run dev ``` **下載安裝：** ``` Windows下載: https://gw.alipayobjects.com/os/LightProxy/LightProxy-Setup.exe Mac下載: https://gw.alipayobjects.com/os/LightProxy/LightProxy.dmg ``` ### 5.3 配置 **以PC端轉發為例：** 1、開啟`LightProxy`工具，編輯時，會自動提生成安裝證書命令，直接複製在命令列中執行即可。 2、新建代理轉發規則配置，這就相當於將該域名所有請求轉到我本地配置的mock工具上  **上述兩條規則解釋：** - 1、訪問`https://www.cnblogs.com/jinjiangongzuoshi/`請求時，自動轉發到`http://localhost:3000/users`介面上。 - 2、將`www.cnblogs.com`域名所有請求轉發到`localhost:3000`上  同理，此時如果訪問`https://www.cnblogs.com/users`，也同樣會轉發到`localhost:3000`上。 這樣無論是在手機端或pc端 訪問指定域名下所有請求都會轉向到對應mock工具中，然後再根據路徑和請求型別獲取配置的返回結果。 **更多例子** 1、例如當我們需要在線上頁面中加入一個 DIV ，如果沒有代理我們需要依賴後端一套類似的預發環境，而有了 LightProxy 我們只需要使用： ``` https://www.alibaba.com/ htmlPrepend://(test) ``` 就可以在一個線上的頁面中插入一個 div 。 2、同樣的，我們可以直接把頁面中的一個 JS 轉發到本地一個開發中的檔案 ``` https://www.google.com/xx.js file:///User/xxx/xxx.js ``` 3、當後端缺少 CORS 頭時，我們可以直接給它先加上 CORS 頭 ``` https://xxx.com/xx.json resCors:// # 給響應的請求增加 CORS header ``` **總體來說**：`LightProxy` 能夠讓開發人員或者測試人員完全掌控自己的開發測試環境，用極低的成本定製自己的開發環境，而不是總是在等待依賴方按照自己的需求提供相應的環境。 甚至於，你可以自己用 NodeJS 書寫針對某個規則的響應 **更詳細使用可參考：** ``` https://github.com/alibaba/lightproxy/issues/19 ``` # 6. 小結 除此之外，`Mockoon` 還支援命令列，比如通過 `mockoon-cli` 就可以快速建立一個 API Server，如圖所示：  命令列的使用和安裝可以參考： ``` https://github.com/mockoon/cli#installation ``` 另外無論是`Mockoon`還是`LightProxy`，還有太多功能，比如 HTTPS、多請求處理、日誌、路由、模板配置這裡就不再一一敘述了，用到的時候大家查要文件就好啦 ``` https://mockoon.com/docs/latest/gui-cheat-sheet/ https://mockoon.com/docs/latest/multiple-responses/ https://mockoon.com/docs/latest/requests-logging/ https://mockoon.com/docs/latest/cors/ https://mockoon.com/tutorials/ ``` 以上便是今天的分享，更多功能期待你的