簡介
前端日常開發(fā)過程中，本地調(diào)試階段總會有對遠程接口的調(diào)用需求，通?？赡軙幸韵峦緩剑?/p>
- 本地nginx進行反向代理
- 使用http-proxy
- 修改host文件
- 后端配合開啟跨域
但這些方法都會略顯繁瑣，有時候我的需求可能只是想代理某一個請求，而非所有請求，這時候可以使用一個好用的工具ReRes
作者的目的就是為了使前端請求映射簡單，打開瀏覽器就能用、支持目錄映射和文件映射、跨平臺
可參考項目源碼里的 README.md進行安裝使用，也可參考下文（有詳細步驟）：
安裝
本插件是chrome插件，有條件者可以直接在chrome商店下載安裝；
條件有限者請看以下步驟：（適用于安裝任何其他chrome插件）
注：截圖來自chrome Version 98.0.4758.102，其他版本可能稍有不同，應該影響不大
1、找到插件的github路徑，本文插件點擊ReRes
2、把源碼下載到本地并解壓
3、在chrome瀏覽器地址欄輸入chrome://extensions/進入擴展頁
開啟Developer mode，點擊Load unpacked 按鈕進行上傳
選中解壓的文件夾，然后打開即可看到插件已經(jīng)出現(xiàn)在插件列表，如下：
瀏覽器右上方?jīng)]有看到按鈕的話可以如圖操作把插件入口固定：
使用
點擊瀏覽器上方的圖標即可打開界面，建議在管理規(guī)則界面進行添加、導入、導出，規(guī)則使用正則進行匹配
作者說明：
批量導入可以編輯一個json文件進行上傳，如下：
[
{
"req":"^https?:\\/\\/.*test.com",
"res":"http://qunar.com",
"group": "[groupName]",
"checked":false
},
{
"req":".*hanan.com",
"res":"http://cssha.com",
"group": "[groupName]",
"checked":true
}
]
單個接口代理小tips
場景：
本地調(diào)試過程中可能會出現(xiàn)一些數(shù)據(jù)只有線上才有，這時候可能就需要模擬數(shù)據(jù)（類似mock，但我想更加快捷），我用接口返回的數(shù)據(jù)格式新建一個json文件，然后把對應的請求鏈接代理到本地的一個json文件
可以是本地如：`file:///D:/test-projects/xxxx.json``
也可以是遠程的或本地服務的，如：http://localhost:5500/xxxx.json
順便介紹一個快速起本地服務的方式
工具：
vscode，并安裝Live Server插件，安裝完后，右下角可以看到一個如下按鈕，點擊即以當前目錄為根目錄起一個服務，并跳轉到瀏覽器打開
如果想要用ReRes代理本地服務中的文件，就可以把json文件放在該目錄中通過http://localhost:5500/xxx.json 進行訪問
文章來源：http://www.zghlxwxcb.cn/news/detail-488295.html
鳴謝造輪子的大佬們?。?！文章來源地址http://www.zghlxwxcb.cn/news/detail-488295.html
到了這里，關于一個好用快捷的前端請求代理chrome插件-ReRes的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
