方便修改http請求頭和響應頭的工具，Easy-Inspector

Easy-Inspector

Easy-Inspector是一個chrome插件（開發者工具），藉助它，你能夠修改請求頭和響應頭，而且把被處理的請求收集起來，方便分析。

Easy-Inspector倉庫：github.com/coconilu/ea…

藉助Easy-Inspector，你能夠輕鬆實現以下場景：

1. 繞開防盜鏈
2. 修改cookie
3. 繞開同源策略

安裝方式

1. 經過chrome網上應用店安裝，搜索Easy-Interceptor，點擊安裝便可

2. 經過Release下載最新的插件包並解壓，打開chrome的開發者模式，加載已解壓的擴展程序，選擇解壓目錄

快速開始

1. 進入設置界面。這個工具只有一個設置界面，經過點擊插件的選項進入。

2. 插件的界面以下，有兩個tab，規則和記錄：

3. 界面功能

配置頁面分爲規則tab和記錄tab

3.1 規則tab：

頂部是規則總開關，和兩個按鈕：保存配置和添加Rule：

1. 在不須要使用Easy-Inspector的時候能夠把總開關關閉，將對上網沒有任何影響。
2. 每次修改配置都須要保存配置讓它生效。
3. 能夠同時添加多條Rule，並讓它們都生效。

對於每一條規則：

1. URL匹配規則 1.1. 第一個下拉框是選擇資源類型，若是你不明確選擇哪一個，建議你使用all 1.2. 第二個下拉框是選擇字符串匹配模式，有include（包含）和reg（正則）兩種方式，包含是指只要字符串被包含在URL裏就行，底層使用url.include(str)匹配，正則是須要匹配正則表達式，底層使用Reg(/str/, "i").test(url)匹配 1.3. 第三個輸入框是字符串（對應上面的str），依賴第二個下拉框的字符串匹配模式
2. 處理匹配到的url的請求頭和響應頭，對於每個請求頭，都有add（添加或覆蓋）和delete（刪除）兩種操做

資源類型有："main_frame", "sub_frame", "stylesheet", "script", "image", "font", "object", "xmlhttprequest", "ping", "csp_report", "media", "websocket", or "other"

3.2 記錄tab：

記錄tab是收集了全部被匹配的請求，方便你分析：

支持業務場景

1. 繞開防盜鏈

有一些網站會給圖片設置防盜措施，大多數的作法是校驗referer請求頭部，使用Easy-Inspector能夠很方便繞開。

爲了演示方便，我把一張圖片放在騰訊雲cos上，並設置防盜鏈：

圖片的鏈接：interceptor-1253621140.cos.ap-nanjing.myqcloud.com/IMG_1380.JP…，當你直接訪問這張圖片的時候，服務器會返回錯誤信息給你：

這張圖片的防盜設置以下：

如今在Easy-Inspector裏添加一條規則，以下：

再次訪問圖片，就能夠看到圖片內容，咱們能夠經過記錄tab看看請求頭和響應頭：

2. 修改cookie

cookie一般是用來校驗登陸狀態的，好比百度，若是你已經登陸過百度，那麼百度首頁的上方會顯示你的頭像和名字：

經過在Easy-Inspector裏添加一條規則，以下：

再次訪問百度，就會發現沒有了登陸態：

經過記錄tab能夠看到，全部被匹配url的請求頭都沒有帶上cookie。

3. 繞開同源策略

同源策略是瀏覽器的安全的策略，藉助Easy-Inspector能夠方便在開發階段繞開同源策略，提高開發幸福指數。

爲了方便演示，咱們繼續用百度做爲例子，咱們在另外一個網頁（只要不是百度就行，好比豆瓣），而後在控制檯輸入以下代碼：

fetch("https://www.baidu.com/").then(function(res) {
    return res.text()
}).then(function(text) {
    console.log(text)
})
複製代碼

而後會看到以下錯誤提示：

經過在Easy-Inspector裏添加一條規則，以下：

效果以下：

4. 更多

互聯網世界中HTTP協議佔據大頭，不少業務場景能夠經過處理請求頭和響應頭完成。

好比經過修改請求頭中的User-Agent，能夠假裝本身的用戶代理。

還有更多的使用場景等待你發掘。

感謝

這個插件主要依賴Ant Design UI組件。

Logo是借用了阿里雲官網的圖標(iconfont):