国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

前端開發(fā)服務器中的 Proxy 代理跨域實現(xiàn)原理解讀

這篇具有很好參考價值的文章主要介紹了前端開發(fā)服務器中的 Proxy 代理跨域實現(xiàn)原理解讀。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方,請大家不吝賜教,您也可以點擊"舉報違法"按鈕提交疑問。

前端服務器代理請求,JavaScript,前端,node.js

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

前言

在前端的開發(fā)過程中,尤其是在瀏覽器環(huán)境下,跨域是個繞不開的話題,相信每個前端都會涉及到這個問題,記住的就直接手敲解決跨域問題,記不住的就只能問度娘了。????

即將登場的是我們的二號人物,跨域。??????

跨域

一、什么是跨域?

跨域是指在瀏覽器環(huán)境中存在的一種資源同源保護策略。當頁面使用ajax/fetch進行網(wǎng)絡請求或者頁面進行資源請求時,網(wǎng)絡協(xié)議域名、端口不一致時就會觸發(fā)瀏覽器的同源策略保護機制。

瀏覽器就會在控制臺輸出像下面圖片中的內(nèi)容。

前端服務器代理請求,JavaScript,前端,node.js

二、解決跨域有哪些途徑呢?

見招拆招,有限制就有對策。目前有很多可以解決跨域的問題,各位看官請移步往下看??????

常見的解決跨域方式

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.hashwindow.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

前端服務器代理請求,JavaScript,前端,node.js

我們發(fā)現(xiàn),vite 給我們啟動了一個本地的 node 服務器,地址為:http://127.0.0.1:5173/。

前端服務器代理請求,JavaScript,前端,node.js

然后現(xiàn)在我們來發(fā)個請求試試。

我們先把 vite.config.js中的代理關掉。

前端服務器代理請求,JavaScript,前端,node.js

我們在onMounted中添加請求。

fetch('http://127.0.0.1:5888/api', {
    method: 'get'
})

此刻我們打開我們的控制臺,驚喜來了。

前端服務器代理請求,JavaScript,前端,node.js

開啟代理

我們現(xiàn)在放開vite.config.js中的代理注釋。

前端服務器代理請求,JavaScript,前端,node.js

再來看看

前端服務器代理請求,JavaScript,前端,node.js

前端服務器代理請求,JavaScript,前端,node.js

原理解析

在 vite 啟動的時候,創(chuàng)建了一個開發(fā)服務器,然后根據(jù)我們進行的開發(fā)服務器配置進行 node 中間件代理。vite 根據(jù)配置和我們請求的 api 地址去請求對應的 api地址,我們怎么把參數(shù)給它的,它就怎么給目標地址;然后目標地址怎么給 vite 的,vite 就原模原樣的給我們??赡芪艺f的有點繞,我們一起看一下下面的圖。

下圖為 node 開發(fā)服務 代理請求流程圖。

前端服務器代理請求,JavaScript,前端,node.js

為什么 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)!

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。如若轉載,請注明出處: 如若內(nèi)容造成侵權/違法違規(guī)/事實不符,請點擊違法舉報進行投訴反饋,一經(jīng)查實,立即刪除!

領支付寶紅包贊助服務器費用

相關文章

  • python實現(xiàn)跨域代理服務器

    python實現(xiàn)跨域代理服務器

    準備環(huán)境 python3.7+ 依賴:aiohttp 代碼實現(xiàn)(代理服務器,返回響應體和進行跨域處理后的headers) 測試 寫個get的方法 下載測試 結果 可以正常下載 并且在響應頭中能看到Server:is my server 同時可以看到添加成功的Allow-Origin響應頭

    2024年02月16日
    瀏覽(15)
  • Vite 配置代理 Proxy,Vue配置代理,解決前端跨域

    Vite 配置代理 Proxy,Vue配置代理,解決前端跨域

    我們在做項目的時候經(jīng)常會遇到跨域的問題,之所以會出現(xiàn)跨域問題是因為瀏覽器的同源策略,即協(xié)議、域名、端口需要一致,才可以訪問服務端的資源。當一個請求地址(服務端的地址)的協(xié)議、域名、端口三者之間任意一個與當前頁面地址(前端頁面地址)不同即為跨域

    2024年02月17日
    瀏覽(25)
  • Vue中利用代理服務器解決跨域問題

    Vue中利用代理服務器解決跨域問題

    目錄 第一章、了解跨域 第二章、解決跨域問題——代理服務器 2.1 了解原理 2.2 如何配置代理服務器 2.2.1 配置代理服務器(方法一) 2.2.2 配置代理服務器(方法二) AJAX及其相關知識應用(很詳細)_?VE?的博客-CSDN博客 前端的8080端口需要向后端服務器3000端口請求數(shù)據(jù),此

    2024年02月03日
    瀏覽(18)
  • .NET Core(C#)使用Titanium.Web.Proxy實現(xiàn)Http(s)代理服務器監(jiān)控HTTP請求

    關于Titanium.Web.Proxy詳細信息可以去這里仔細看看,這里只記錄簡單用法 NuGet直接獲取Titanium.Web.Proxy 配置 與其說是配置,不如就說這一部分就是未來你需要使用的部分,想知道具體每個部分是干什么的就去看原文鏈接 全放過來太占地方 最后的 Console.Read(); 是一個等待函數(shù),你

    2024年02月09日
    瀏覽(24)
  • umi 如何使用 proxy 代理解決 開發(fā)環(huán)境跨域 問題

    umi 如何使用 proxy 代理解決 開發(fā)環(huán)境跨域 問題

    由于瀏覽器的同源策略限制,當一個請求 URL 的協(xié)議、域名、端口和當前頁面 URL 任意一個不一致時都會出現(xiàn)跨域錯誤。 eg: 用 node run了一個 http://localhost:8080 的服務,在這個服務器下訪問的網(wǎng)頁也默認在 http://localhost:8080 這個域下面; 假設服務端所在的域是 http://example.com 這

    2024年02月09日
    瀏覽(16)
  • 記:vite3+vue3+axios前端項目跨域問題解決【前端和服務器nginx配置】

    前言:什么是跨域,網(wǎng)上一搜一大把,所以這里直接跳過,直入主題。 處理方式:不通過后端處理跨域,通過前端+服務器nginx處理。 1.前端涉及處理跨域的必要配置(開發(fā)環(huán)境、生產(chǎn)環(huán)境):vite3、vue3、axios 2.服務器涉及處理跨域的配置(生產(chǎn)環(huán)境):nginx【主要用到其配置

    2024年02月01日
    瀏覽(101)
  • Vue 3中的反向代理 和如何在服務器配置反向代理

    如何在Vue 3項目中配置反向代理,讓前端開發(fā)變得爽到爆!還有個小插曲,Vite為我們提供了更簡單的方式,就像找對象一樣直接。 首先,我們來談談反向代理是什么。簡單來說,反向代理就像是前端和后端之間的婚姻介紹所。前端需要向后端請求數(shù)據(jù),但由于某些原因(比如

    2024年04月13日
    瀏覽(16)
  • 本地開發(fā)環(huán)境請求服務器接口跨域的問題(vue的問題)

    本地開發(fā)環(huán)境請求服務器接口跨域的問題(vue的問題)

    上面的這個報錯大家都不會陌生,報錯是說沒有訪問權限(跨域問題)。本地開發(fā)項目請求服務器接口的時候,因為客戶端的同源策略,導致了跨域的問題。下面先演示一個沒有配置允許本地跨域的的情況: 可以看到,此時我們點擊獲取數(shù)據(jù),瀏覽器提示我們跨域了。所以我

    2024年01月23日
    瀏覽(22)
  • 用Java開發(fā)HTTP代理服務器

    HTTP代理服務器是一種網(wǎng)絡應用,它充當位于客戶端和目標服務器之間的中間節(jié)點,將客戶端發(fā)出的HTTP請求轉發(fā)給目標服務器,并將目標服務器返回的HTTP響應內(nèi)容回傳給客戶端。通過使用代理服務器,客戶端可以避免直接訪問目標服務器,從而更加安全地訪問互聯(lián)網(wǎng)資源。

    2024年02月16日
    瀏覽(39)
  • 使用Nginx作為反向代理服務器在Linux中的最佳實踐

    使用Nginx作為反向代理服務器在Linux中的最佳實踐

    在Linux環(huán)境下,Nginx因其高效性能、穩(wěn)定性以及豐富的功能集而廣泛用于作為反向代理服務器。以下是在Linux中使用Nginx作為反向代理服務器的最佳實踐: 1. 安裝與配置 首先,確保你的Linux發(fā)行版已經(jīng)安裝了Nginx。大多數(shù)Linux發(fā)行版都提供了Nginx的包管理工具。例如,在基于Deb

    2024年01月17日
    瀏覽(26)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領取紅包,優(yōu)惠每天領

二維碼1

領取紅包

二維碼2

領紅包