資訊專欄INFORMATION COLUMN
摘要：最后確定的方案最終決定的方案是使用一個代理服務器，也就是，來幫助我們解決環境問題。團隊規則同步支持遠程規則，目的是讓團隊成員間共用同一份轉發規則，降低溝通成本。
一、ZanProxy 是什么
一言以蔽之，ZanProxy 是一個基于 Node.js 的代理服務器。它專注于幫助前端開發提高開發效率。
二、我們為什么需要一個代理工具在前端開發中，我們常常會碰到以下幾個場景：
對于前端開發者來說，我們需要一個工具能讓我們直接用本地的前端代碼調試QA環境、預發環境、甚至線上的頁面。
我們需要在開發的時候需要快速切換環境，修改系統的 host 會有瀏覽器的 DNS 緩存，常常需要手動清除。所以我們需要一個工具讓我們秒切host，不用等待 。
前后端并行開發的時候，開發中接口的數據通常需要 mock。通過nginx反向代理到mock平臺步驟繁瑣，配置麻煩，對新手及其不友好。 所以我們需要一個工具能輕松 mock 接口的數據。
在 ZanProxy 之前，我們做過的努力為解決上面這些問題，我們進行了一些摸索并且做出了一些工具，但是這些工具都這樣或那樣不盡人意的地方。
我們曾將做了一個項目級別的mock工具叫Doraemon。 這個工具通過修改發送ajax請求的包，會把我們的請求轉發到我們的一個 mock 數據平臺，從而實現接口 mock 的功能。
后來我們又做了一個工具叫zRed。zRed是一個 Chrome 瀏覽器的插件，會自動監控 chrome 瀏覽器內的所有請求，根據預先設置的匹配規則，將線上前端 css,js 代碼請求轉發成相對應的本地請求。
但這些方案都存在明顯的問題首先，Doraemon會入侵我們的項目代碼，強依賴于發送ajax請求的包，不利于工具的擴展和升級。而且這個工具只有 mock 功能，上面很多問題都不能得以解決。
zRed由于是一個chrome瀏覽器插件，不能在其他平臺上使用，比如說在移動端上使用，讓真機調試成為了一個問題。
最后確定的方案最終決定的方案是使用一個代理服務器，也就是 ZanProxy， 來幫助我們解決環境問題。和以前的方案相比，ZanProxy 擁有更豐富的功能，可以同時在pc端和移動端使用，為開發者解決環境問題提供更了更多的助力。
三、ZanProxy 能做什么 請求代理與轉發ZanProxy 支持代理 http 和 https 的請求，并會根據用戶配置的規則進行請求的轉發。用戶可以在界面上配置自己的請求轉發規則，將符合某種特征的請求轉發到需要的地址，可以是本地的一個文件路徑或者是一個 URL 。我們常見的用法是將瀏覽器請求的靜態資源如 js，css 等文件轉發到本地，實現用本地代碼對線上頁面的調試。
團隊規則同步ZanProxy 支持遠程規則，目的是讓團隊成員間共用同一份轉發規則，降低溝通成本。ZanProxy 會在啟動的時候同步最新的遠程規則，所有的變更都能在使用者之間共享。
無痛 Host 切換ZanProxy 支持用戶自定義 Host 解析，方便用戶進行環境的切換，這是通過在轉發時，把域名直接替換成指定 ip 實現的，Hosts 的修改沒有緩存。ZanProxy 不會修改系統的 Hosts 文件，所以用戶在關閉 ZanProxy 后會恢復正常的 DNS 解析，不需要擔心會有什么副作用。
自定義響應數據ZanProxy 支持用戶自定義請求的響應數據，意味著用戶可以利用 ZanProxy mock 接口數據，不用再等待接口開發完成。
請求監控ZanProxy 可以讓用戶監控所有被代理的請求，能看到每一個請求的請求數據和響應數據。用戶可以將手機的代理設置成 ZanProxy ，通過 ZanProxy 監控手機的請求，為移動端真機調試帶來便利。
自定義插件隨著業務復雜度的增加，單純的請求轉發已經不能滿足業務方的需求，面對不斷增長的需求我們發現ZanProxy需要有一個機制，讓用戶擴展 ZanProxy 的代理行為，于是我們為 ZanProxy 增加了支持自定義插件的功能，這樣 ZanProxy 就有了很強的擴展性。ZanProxy 支持用戶開發自定義插件進行功能的擴展，滿足用戶在各種場景下的需求，比如給所有的響應增加 Access-Control-Allow-Origin 的頭，輕松解決跨域問題。自定義插件編寫指南：點擊此處。
四、寫在最后雖然 ZanProxy 在有贊內部已經大規模使用了，但肯定存在許多的不足和可以改進的地方，希望大家能多提寶貴的意見。
相關鏈接主頁：https://youzan.github.io/zan-proxy/
Github: https://github.com/youzan/zan-proxy
使用文檔：https://youzan.github.io/zan-proxy/book/
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95659.html
摘要：于是關鍵詞求助百度，給出的答案要不說是的問題，要不是說客戶端的問題，都嘗試了一下，發現一點用處都沒有。但是仍然有點奇怪，也是使用，后來回憶，在換百度這個鏈接之前殺了一次進程，應該是這個因素導致的。 寫在前面 最近接手了一個古舊的項目，跟客戶端、服務器端一起調一個支付相關的app內嵌H5頁面，這個頁面有兩部分組成，主頁面A加上一個最終支付頁面B，B頁面是通過iframe嵌入到A頁面中的，...
摘要：前端開發如何做好本地接口模擬之前有寫過一篇本地化接口模擬前后端并行開發，講到過本地接口模擬，但不太細致。有哪些途徑本地接口模擬一般分為工具層面和代碼層面。因為本地接口模擬功能主要是針對的返回值為格式的異步請求，所以這種方式主要用文件。 前端開發如何做好本地接口模擬 之前有寫過一篇 本地化接口模擬、前后端并行開發，講到過本地接口模擬，但不太細致。這次細細的說說本地接口模擬。 1. 有什么...
摘要：詳細具體的使用可以見文章手摸手，帶你優雅的使用。為了加速線上鏡像構建的速度，我們利用源進行加速并且將一些常見的依賴打入了基礎鏡像，避免每次都需要重新下載。 完整項目地址：vue-element-admin系類文章二：手摸手，帶你用vue擼后臺 系列二（登錄權限篇）系類文章三：手摸手，帶你用vue擼后臺 系列三(實戰篇）系類文章四：手摸手，帶你用vue擼后臺 系列四(vueAdmin 一...
摘要：移動端應用一般都運行在微信瀏覽器中中手機瀏覽器中。因為微信瀏覽器是定制的瀏覽器，一般的遠程調試方式都不可用，需要配合特定的工具，如微信開發者工具。 前端如何高效的與后端協作開發 1. 前后端分離 前端與后端的分離，能使前端的開發脫離后端的開發模式，擁有更大的自由度，以此便可做前端工程化、組件化、單頁面應用等。 可以參考：前后端分離、web與static服務器分離 2. 盡量避免后端模板...
摘要：移動端應用一般都運行在微信瀏覽器中中手機瀏覽器中。因為微信瀏覽器是定制的瀏覽器，一般的遠程調試方式都不可用，需要配合特定的工具，如微信開發者工具。 前端如何高效的與后端協作開發 1. 前后端分離 前端與后端的分離，能使前端的開發脫離后端的開發模式，擁有更大的自由度，以此便可做前端工程化、組件化、單頁面應用等。 可以參考：前后端分離、web與static服務器分離 2. 盡量避免后端模板...
閱讀 1004·2021-11-25 09:43
閱讀 1672·2019-08-30 13:59
閱讀 1589·2019-08-30 11:22
閱讀 2123·2019-08-30 11:06
閱讀 1299·2019-08-28 17:51
閱讀 3717·2019-08-26 12:12
閱讀 778·2019-08-26 12:11
閱讀 443·2019-08-26 12:10
