各位朋友你們好，我是桃小瑞，微信公眾 @ 桃小瑞。在這給大家拜個晚年，祝各位朋友新年快樂。

前言

在前端的開發(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)容。希望本篇文章對你有所幫助。

如有不足或你有其他的見解歡迎留在評論區(qū)。文章來源地址http://www.zghlxwxcb.cn/news/detail-793444.html

到了這里，關于前端開發(fā)服務器中的 Proxy 代理跨域實現(xiàn)原理解讀的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！