各位朋友你們好,我是桃小瑞
,微信公眾 @ 桃小瑞
。在這給大家拜個晚年,祝各位朋友新年快樂。
前言
在前端的開發(fā)過程中,尤其是在瀏覽器環(huán)境下,跨域是個繞不開的話題,相信每個前端都會涉及到這個問題,記住的就直接手敲解決跨域問題,記不住的就只能問度娘了。????
即將登場的是我們的二號人物,跨域。??????
跨域
一、什么是跨域?
跨域是指在瀏覽器環(huán)境中存在的一種資源同源保護策略
。當頁面使用ajax
/fetch
進行網(wǎng)絡請求或者頁面進行資源請求時,網(wǎng)絡協(xié)議
、域名
、端口
不一致時就會觸發(fā)瀏覽器的同源策略保護
機制。
瀏覽器就會在控制臺輸出像下面圖片中的內(nèi)容。
二、解決跨域有哪些途徑呢?
見招拆招,有限制就有對策。目前有很多可以解決跨域的問題,各位看官請移步往下看??????
常見的解決跨域方式
1、 JSONP
利用script
標簽沒有跨域的限制,從而實現(xiàn)跨域。
注:
JSONP
僅支持get
請求,并且需要后端的支持。
2、 CROS( Cross-Origin Resource Sharing )
利用 CROS
實現(xiàn)跨域,后端在請求的響應請求頭上添加Access-Control-Allow-Origin
屬性,并設置指定的站點值,或者設置為*
。
注:需要前后端同時支持。
3、 nignx
nignx 反向代理
4、websocket
利用websocket
,實現(xiàn)瀏覽器與服務器的全雙工通信,同時允許跨域通訊。
5、iframe
iframe 搭配 document.domain
、location.hash
、window.name
三種方式實現(xiàn)跨域。
6、node作為中間件代理
啟用一個本地的node
服務器充當中間件,進行跨域處理。
工作中常常用方式
在工作中常見的跨域使用方式有nignx 反向代理
、CROS
、node 中間代理
。
為什么說node 中間代理
也是常用的方式呢?都沒看見使用過呀。來來來,此時此刻就需要涉及到我們今天的主人公了。
三、跨域疑問
跨域的時候,請求是否是發(fā)出去了的呢?數(shù)據(jù)我們是否又收到了呢?
答案:
跨域的時候,請求是已經(jīng)發(fā)出去了,而且后端已經(jīng)將數(shù)據(jù)返給我們了的,只是被瀏覽器劫持了,我們拿不到而已。
相信你看完下面的模擬對話就能懂了。
- 前端:發(fā)送請求給后端。
- 后端:收到請求,數(shù)據(jù)返給你了。
- 瀏覽器:你后端這所在地(
指:協(xié)議、域名、端口
)和我所在地不對呀,肯定不可信,攔截掉,為了不讓前端云里霧里的,我給它報個異常吧。 - 我們的數(shù)據(jù)就這樣被瀏覽器所攔截,不給我們了。
- …
node 中間代理
node 中間代理
它還有另外一個名字,叫 Proxy 代理跨域
。主角閃亮登場。????
簡單使用
我們一起來回顧一下它的寫法:
server: {
proxy: {
'/api': {
target: 'http://locahost:3000', // 目標地址
changeOrigin: true, // 是否換源, true 換源
rewrite: (path) => path.replace(/^\/api/, ''), // 替換
}
}
}
環(huán)境說明
我這里使用的環(huán)境為:
- vue
- vite
其他的腳手架等原理都差不多。環(huán)境對我們來說都不是事,因為我們需要扒的是它的原理。
現(xiàn)在我們步入正題。
復現(xiàn)
我們現(xiàn)在來啟動我們的項目。
pnpm run dev
我們發(fā)現(xiàn),vite 給我們啟動了一個本地的 node 服務器,地址為:http://127.0.0.1:5173/。
然后現(xiàn)在我們來發(fā)個請求試試。
我們先把 vite.config.js
中的代理關掉。
我們在onMounted
中添加請求。
fetch('http://127.0.0.1:5888/api', {
method: 'get'
})
此刻我們打開我們的控制臺,驚喜來了。
開啟代理
我們現(xiàn)在放開vite.config.js
中的代理注釋。
再來看看
原理解析
在 vite 啟動的時候,創(chuàng)建了一個開發(fā)服務器,然后根據(jù)我們進行的開發(fā)服務器配置進行 node 中間件代理。vite 根據(jù)配置和我們請求的 api 地址去請求對應的 api地址,我們怎么把參數(shù)給它的,它就怎么給目標地址;然后目標地址怎么給 vite 的,vite 就原模原樣的給我們??赡芪艺f的有點繞,我們一起看一下下面的圖。
下圖為 node 開發(fā)服務 代理請求流程圖。
為什么 node 就可以解決跨域呢?
因為 node 不是運行在瀏覽器中的東西,所以沒有跨域這種問題。
溫馨提醒
跨域,也就是同源策略只存在于瀏覽器環(huán)境。如:chrome、ie、瀏覽器、webview、使用了瀏覽器內(nèi)核的環(huán)境。在app、小程序等平臺中是沒有這個的。
總結
以上就是前端 Proxy 代理跨域實現(xiàn)原理解讀
的全部內(nèi)容。希望本篇文章對你有所幫助。文章來源:http://www.zghlxwxcb.cn/news/detail-793444.html
如有不足或你有其他的見解歡迎留在評論區(qū)。文章來源地址http://www.zghlxwxcb.cn/news/detail-793444.html
到了這里,關于前端開發(fā)服務器中的 Proxy 代理跨域實現(xiàn)原理解讀的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持TOY模板網(wǎng)!