AnyProxy使用本地靜態資源調試線上

AnyProxy使用本地靜態資源調試線上

場景估計大家都瞭解，所以我們直接開始吧。

調試原理很簡單，就是anyproxy提供了一個http的攔截器和規則配置加載器，加載對應的規則後進行http的一些操作，如forward等等。

AnyProxy部分

安裝AnyProxy，版本4.0

npm install -g anyproxy

編輯對應的rule

const resRegx = /\.[a-z0-9]{8}.min/i;

module.exports = {
    summary: 'a rule to modify response',
    * beforeSendRequest(requestDetail) {
        let path = requestDetail.url;
        let headers = requestDetail.requestOptions;

        // 如果是xxx的js，那麼就修改爲請求本地
        if (path.match(/.*xxx\.xxx\.com.*\.js/) || path.match(/.*xxx\.xxx\.com.*\.vm/)) {
            var newOption = Object.assign({}, requestDetail.requestOptions, {
                hostname: '127.0.0.1', // 本地ip
                port: 8080,
                headers: {...headers, host: '127.0.0.1'}
            });
            return {
                protocol: 'http',
                requestOptions: newOption
            }
        }
    },

};

啓動anyproxy

anyproxy --intercept --rule your_file.js

這樣anyproxy就可以攔截默認端口8001了。接下來需要在ruleforward的靜態文件路徑server起來。所以我們需要一個靜態文件服務器(因爲我們項目訪問JS有認證攔截，所以修改起來比較麻煩，就想看是否可以簡單點).

靜態服務器

這裏可選的很多，最後選擇了python的一行命令搭建當前目錄的http靜態服務器。

python -m SimpleHTTPServer 8080

網絡攔截

上面看似已經連接起來了，但是如何讓本地的請求端口80轉發到對應的8001呢? 當然如果anyproxy攔截的就是80端口，那麼這一步可以忽略。

使用的方法是在網絡裏添加http的proxy。這樣完整的調用鏈條就形成了，可以愉快的玩耍了。

與Charles的對比

兩者定位還是有很大的區別，所以放在一起對比可能不太合適。Charles更偏向網絡層的應用，不具備加載Rule的能力。AnyProxy是一個Http代理服務器，只對Http(s)進行攔截。

在網絡攔截的那一步，在想是不是用charles不用系統網絡也可以？嘗試了HTTP的PROXY並沒有成功，這個可以等以後來填一下。

附錄

1. AnyProxy Github

2. 使用MITM調試線上前端錯誤