前言

作為前端開(kāi)發(fā)者，你大概率遇到過(guò)這樣的場(chǎng)景：本地寫(xiě)好的頁(yè)面，調(diào)用后端接口時(shí)控制臺(tái)突然報(bào)錯(cuò)，提示“Access-Control-Allow-Origin”相關(guān)信息，明明接口地址沒(méi)錯(cuò)、參數(shù)也對(duì)，卻就是拿不到數(shù)據(jù)——這就是典型的跨域問(wèn)題。

很多新手會(huì)被“跨域”的專業(yè)術(shù)語(yǔ)嚇住，但其實(shí)它本質(zhì)是瀏覽器的一道“安全門禁”，理解起來(lái)并不復(fù)雜。今天就用生活化的例子，結(jié)合專業(yè)邏輯，帶你徹底搞懂跨域問(wèn)題的來(lái)龍去脈。

先搞懂：什么是跨域？

簡(jiǎn)單說(shuō)，跨域就是“不同域名之間的資源請(qǐng)求”。但這里的“不同”有明確的判斷標(biāo)準(zhǔn)，不是單看域名是否一樣，而是要滿足“同源策略”的要求——所謂“同源”，就是兩個(gè)地址的協(xié)議、域名、端口號(hào)必須完全一致，只要有一個(gè)不一樣，就是跨域。

舉幾個(gè)直觀的例子，幫你快速判斷：

• 同源（允許請(qǐng)求）：http://www.abc.com 和 http://www.abc.com/index（路徑不同，同源）
• 跨域（被瀏覽器攔截）：http://www.abc.com 和 https://www.abc.com（協(xié)議不同：http vs https）
• 跨域（被瀏覽器攔截）：http://www.abc.com 和 http://api.abc.com（域名不同：主域相同，子域不同）
• 跨域（被瀏覽器攔截）：http://www.abc.com:80 和 http://www.abc.com:8080（端口不同：80 vs 8080）

這里要注意一個(gè)關(guān)鍵：跨域不是“請(qǐng)求發(fā)不出去”，而是“請(qǐng)求發(fā)出去了，后端也處理了，但瀏覽器收到響應(yīng)后，發(fā)現(xiàn)是跨域請(qǐng)求且沒(méi)被允許，就把數(shù)據(jù)攔截了”——相當(dāng)于快遞員（請(qǐng)求）把包裹（響應(yīng)數(shù)據(jù)）送到小區(qū)門口，保安（瀏覽器）發(fā)現(xiàn)收件人不是本小區(qū)的（跨域），又沒(méi)收到放行通知，就把包裹扣下了。

為什么會(huì)有跨域限制？瀏覽器在怕什么？

這個(gè)限制源于瀏覽器的“同源策略”，核心目的是保護(hù)用戶的信息安全，防止惡意網(wǎng)站竊取數(shù)據(jù)。

想象一個(gè)場(chǎng)景：你登錄了銀行官網(wǎng)（https://bank.com），瀏覽器會(huì)保存銀行的登錄cookie（相當(dāng)于你的身份憑證）。如果此時(shí)你不小心打開(kāi)了一個(gè)惡意網(wǎng)站（https://hacker.com），這個(gè)網(wǎng)站偷偷發(fā)送請(qǐng)求到銀行官網(wǎng)，想獲取你的賬戶信息——如果沒(méi)有跨域限制，瀏覽器會(huì)帶著你的cookie發(fā)送請(qǐng)求，銀行會(huì)誤以為是你本人操作，從而泄露你的敏感數(shù)據(jù)。

正是有了同源策略，瀏覽器才會(huì)攔截這種“跨界的惡意請(qǐng)求”，相當(dāng)于給用戶的信息加了一道安全鎖。

前端常用的跨域解決方案（通俗易懂版）

跨域是開(kāi)發(fā)中常見(jiàn)的需求（比如前端項(xiàng)目部署在www.abc.com，后端接口部署在api.abc.com），我們需要在保證安全的前提下，讓“跨界溝通”正常進(jìn)行。以下是3種最常用、最易落地的方案：

1. 后端配置CORS（最推薦，簡(jiǎn)單直接）

CORS（跨域資源共享）是官方推薦的解決方案，核心思路是讓后端告訴瀏覽器：“這個(gè)跨域請(qǐng)求是安全的，你可以放行”。

就像前面的快遞例子，只要小區(qū)物業(yè)（后端）提前通知保安（瀏覽器）：“允許www.abc.com的用戶接收來(lái)自api.abc.com的包裹”，保安就會(huì)放行。具體操作是后端在響應(yīng)頭中添加Access-Control-Allow-Origin字段，指定允許跨域的前端域名（比如http://www.abc.com），也可以設(shè)為*（允許所有域名跨域，適合開(kāi)發(fā)環(huán)境，生產(chǎn)環(huán)境不推薦）。

優(yōu)點(diǎn)：前端無(wú)需任何修改，只需后端配合配置，兼容性好（支持所有現(xiàn)代瀏覽器）。

2. 前端使用代理（開(kāi)發(fā)環(huán)境首選）

如果后端暫時(shí)無(wú)法配置CORS，前端可以用“代理服務(wù)器”搭橋——相當(dāng)于找一個(gè)“中間人”，幫你轉(zhuǎn)發(fā)請(qǐng)求。

比如前端項(xiàng)目運(yùn)行在http://localhost:8080，想調(diào)用http://api.abc.com的接口（跨域），可以配置一個(gè)代理服務(wù)器（比如webpack-dev-server、Vite代理），讓請(qǐng)求先發(fā)送到http://localhost:8080/api（和前端同源，不跨域），再由代理服務(wù)器轉(zhuǎn)發(fā)到http://api.abc.com。因?yàn)榇矸?wù)器是“服務(wù)器端”的，不受瀏覽器同源策略限制，所以能正常拿到響應(yīng)，再返回給前端。

優(yōu)點(diǎn)：開(kāi)發(fā)環(huán)境下無(wú)需依賴后端，前端自己就能解決，配置簡(jiǎn)單（比如Vite只需在vite.config.js中加幾行代碼）。

3. JSONP（古老方案，僅適用于GET請(qǐng)求）

JSONP是早期的跨域方案，核心思路是利用<script>標(biāo)簽不受同源策略限制的特性——<script>標(biāo)簽可以加載任意域名的腳本，我們可以通過(guò)它加載后端返回的“帶數(shù)據(jù)的函數(shù)調(diào)用”。

比如前端定義一個(gè)處理數(shù)據(jù)的函數(shù)handleData(data)，然后創(chuàng)建<script src="http://api.abc.com?callback=handleData">，后端收到請(qǐng)求后，返回handleData({name: "xxx"})，瀏覽器加載這個(gè)腳本后，會(huì)自動(dòng)執(zhí)行handleData函數(shù)，從而拿到數(shù)據(jù)。

缺點(diǎn)：只能支持GET請(qǐng)求（因?yàn)?code><script>標(biāo)簽只能發(fā)起GET請(qǐng)求），安全性較低（可能存在XSS攻擊），現(xiàn)在已基本被CORS替代，僅在兼容舊瀏覽器時(shí)偶爾使用。

總結(jié)：跨域問(wèn)題的核心邏輯

跨域不是“錯(cuò)誤”，而是瀏覽器的“安全機(jī)制”；解決跨域的核心，要么是讓后端“允許跨域”（CORS），要么是讓前端“繞開(kāi)跨域限制”（代理、JSONP）。

實(shí)際開(kāi)發(fā)中，優(yōu)先選擇CORS（生產(chǎn)環(huán)境最安全、最規(guī)范），開(kāi)發(fā)環(huán)境可以用代理提高效率，JSONP僅作為兜底方案。理解了“同源策略”和“瀏覽器攔截響應(yīng)”的本質(zhì)，再遇到跨域問(wèn)題，就能快速定位解決方案了。

最后提醒一句：跨域限制只存在于“瀏覽器端”，如果是服務(wù)器之間的請(qǐng)求（比如Java后端調(diào)用Python接口），不受同源策略影響，無(wú)需處理跨域。

希望這篇文章能幫你徹底搞懂跨域問(wèn)題，下次遇到時(shí)不再頭疼

到此這篇關(guān)于5分鐘讀懂跨域問(wèn)題的文章就介紹到這了,更多相關(guān)5分鐘讀懂跨域問(wèn)題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論