webpack proxy工作原理


webpack proxy即webpack提供的代理服務;

基本行為就是接收客戶端發送的請求后轉發給其他服務器
其目的是為了便於開發者在開發模式下解決跨域問題(瀏覽器安全策略限制)
想要實現代理首先需要一個中間服務器,webpack中提供服務器的工具為webpack-dev-server

webpack-dev-server

是webpack官方退出的一款開發工具,將自動編譯和自動刷新瀏覽器等一系列對開發友好的功能全部集成在一起
目的是為了提高開發者日常的開發效率,【只適用在開發階段】
關於配置方面,在webpack配置對象屬性中通過devServer屬性提供,如下:

devServer里面proxy則是關於代理的配置,改屬性為對象的形式,對象中每一個屬性就是一個代理的規則匹配

屬性的名稱是需要被代理的請求路徑前綴,一般為了辨別都會設置前綴為/api,值為對應的代理匹配規則,對應如下:
target:表示的是代理到的目標地址
pathRewrite:默認情況下,我們的/api-hy也會被寫入到URL中,如果希望杉樹,可以適用pathRewrite
secure:默認情況下不接收轉發到https的服務器上,如果希望支持,可以設置為false
changeOrigin:它表示是否更新代理后請求的headers 中host地址

工作原理

proxy工作原理實質上是利用http-proxy-middleware這個http代理中間件,實現請求轉發給其他服務器

例子:
在開發階段,本地地址為http://localhost:3000,該瀏覽器發送一個前綴帶有/api標識的請求到服務端獲取數據,但相應這個請求的服務器
只是將請求轉發到另一台服務器中:
跨域


在開發階段,webpack-dev-server會啟動一個本地開發服務器,所以我們的應用在開發階段是獨立運行在localhost的一個端口上,
而后台服務又是運行在另外一個地址上


所以在開發階段中,由於瀏覽器同源策略的原因,當本地訪問后端就會出現跨域請求的問題
通過設置webpack proxy實現代理請求后,相當於瀏覽器與服務器中添加一個代理者


在本地發送請求的時候,代理服務器相應該請求,並將請求轉發到目標服務器,目標服務器響應數據后將數據返回給代理服務器,

最終再由代理服務器將數據響應給本地

再代理服務器傳遞數據給本地瀏覽器的過程中,兩者同源,並不存在跨域行為,這時候瀏覽器就能正常接收數據:
【服務器與服務器之間請求的數據並不會存在跨域行為,跨域行為是瀏覽器安全策略限制】

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM