fiddler前端實戰應用--01--請求代理

作爲一名前端,跨域問題總是避免不了。解決跨域問題的方法無非就是JSONP,CORS和請求代理。但在實現在項目開發環境中,JSONP和CORS其實用的不多,而請示代理卻是最常用也是最好用的。

請求代理的方法其實也有很多種。前端常見的有:

  1. webpack自帶的代理, 直接在webpack的devServer裏的proxy裏設置以下代碼就可以了。
// /api 匹配請求的匹配值,如果請求包含/api,則會走代理
'/api': {
    // targetURL 你要代理到的目標服務器
    target: 'targetURL',
    changeOrigin: true, 
    // 重寫請求中的/api爲/
    pathRewrite: {
      '/api': '/'
    }
  }

優點:直接在項目的配置文件裏就可以修改,不需要藉助其他的工具,只要你的項目是用webpack作構建工具

缺點:每一次更換目標服務器都需要重啓整個前端項目,特別是對大些項目,對接的後端又多,項目又大,啓動一次都要個兩三分鐘。

  1. 使用nginx作反向代理

這個更多的是在生產環境由運維來配置,當然你也可以在自己的本地來配置,不過需要先安裝,然後在配置文件來配置對應的代理目標服務器。

優點:配置很強大

缺點:對於前端來說,一個是學習的成本問題,二個是每次都要去修改配置文件實在是不夠方便。

如何用fiddler實現請求代理

之前幾種請求代理的方式的缺點主要是麻煩,那有沒有一種方式不那麼麻煩呢?

有,一種就是用fiddler工具

  1. 首先,你得安裝fiddler工具,至於怎麼下載安裝這裏就不講了,網上一大把, 不過我建議是裝 flddler web debugger 版本的

  2. 安裝好了,你就可以看到如下界面:

    fiddler界面

  3. 找到下圖紅色框AutoResponder,單擊進入

    AutoResponder

  4. 進入AutoResponder,點擊Add Rule,則會添加

    Add Rule

  5. 編輯規則,比如

    本地請求: http://localhost:8000/api

    目標請求: http://10.16.85.137

    你就可以這樣設置

    Edit Rule

上圖匹配規則用了正則表達式來匹配,所以本地請求開頭包含http://localhost:8000/api,就會跳轉到http://10.16.85.137

在這裏你就完成了一個請求代理

AutoResponder 設置
`Enable rules`: 是否啓用規則, 這裏肯定是要勾選

`Umatched requests passthrough`: 未匹配到的請求是否能正常請求,最好是勾選

`Enable Latency`: 是否啓用延時,啓用之後你可以在規則裏設置請求延遲時間
匹配規則

(1)純粹字符串匹配

Fiddler將會按照不區分字母大小寫來匹配字符串。

Demo如下:

匹配規則

(2)前綴NOT匹配

跟上面的類似,Fiddler還有一個非字符串匹配的規則:NOT:該規則會匹配url中不含給定字符的所有請求

Demo如下:

匹配規則

(3)前綴EXACT匹配

表達式以EXACT:爲前綴,此匹配區分字母大小寫

匹配規則

(4)前綴REGEX匹配

正則表達式:Fiddler支持以regex:爲前綴的正則表達式語法,

使用.+匹配一個或多個字符,

使用.*匹配0個或多個字符,

使用^匹配字符串開始位置,

使用$匹配字符串結尾位置。

Demo如下:

匹配規則

※注:選項字符串(?insx)的功能如下:它會啓動大小寫敏感限制,要求顯示捕獲組,支持單行語義,支持使用#符號添加註釋

3、設置響應字符串

匹配規則

一些返回的actiontext如下

匹配規則

※注:標藍色區域的內容爲平時較常用的部分

可以參考這篇文章
Fiddler中使用AutoResponder創建規則替換線上文件

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章