作爲一名前端,跨域問題總是避免不了。解決跨域問題的方法無非就是JSONP,CORS和請求代理。但在實現在項目開發環境中,JSONP和CORS其實用的不多,而請示代理卻是最常用也是最好用的。
請求代理的方法其實也有很多種。前端常見的有:
- webpack自帶的代理, 直接在webpack的devServer裏的proxy裏設置以下代碼就可以了。
// /api 匹配請求的匹配值,如果請求包含/api,則會走代理
'/api': {
// targetURL 你要代理到的目標服務器
target: 'targetURL',
changeOrigin: true,
// 重寫請求中的/api爲/
pathRewrite: {
'/api': '/'
}
}
優點:直接在項目的配置文件裏就可以修改,不需要藉助其他的工具,只要你的項目是用webpack作構建工具
缺點:每一次更換目標服務器都需要重啓整個前端項目,特別是對大些項目,對接的後端又多,項目又大,啓動一次都要個兩三分鐘。
- 使用nginx作反向代理
這個更多的是在生產環境由運維來配置,當然你也可以在自己的本地來配置,不過需要先安裝,然後在配置文件來配置對應的代理目標服務器。
優點:配置很強大
缺點:對於前端來說,一個是學習的成本問題,二個是每次都要去修改配置文件實在是不夠方便。
如何用fiddler實現請求代理
之前幾種請求代理的方式的缺點主要是麻煩,那有沒有一種方式不那麼麻煩呢?
有,一種就是用fiddler工具
首先,你得安裝fiddler工具,至於怎麼下載安裝這裏就不講了,網上一大把, 不過我建議是裝 flddler web debugger 版本的
安裝好了,你就可以看到如下界面:
找到下圖紅色框
AutoResponder
,單擊進入進入
AutoResponder
,點擊Add Rule
,則會添加編輯規則,比如
本地請求: http://localhost:8000/api
目標請求: http://10.16.85.137
你就可以這樣設置
上圖匹配規則用了正則表達式來匹配,所以本地請求開頭包含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創建規則替換線上文件