跨域問題及前後端常見解決方案？_東東吖

一.什麼是跨域？

跨域其實就是瀏覽器的同源策略所導致的。protocol（協議）、domain（域名）、port（埠）三個有一個不一致，就會產生跨域。

二.跨域的示例？

瞭解跨域的概念後，解下來我們就來模擬出現跨域的狀況，我們用node來建立後端伺服器，並編寫相關介面。不瞭解node的同學，可移步到我這篇文章，從0到1學習Node.js系列教程（第一篇）：API介面初體驗

編寫一個post請求：

用postman調這個介面，成功調通了。

然後我們建立一個vue專案來進行聯調，就會發現請求沒有返回。

可是剛剛我們用postman來測試都是可以的呀，彆著急，我們來看看console,就會發現有以下報錯，出現以下報錯其實就是出現了跨域問題。

這也充分證明了跨域是瀏覽器的行為，並不是伺服器的行為，出現這樣的狀況是因為你在瀏覽器其實是發出請求了的，伺服器也接收到請求，並返回了資料了。那這裡為什麼沒有接收到資料了，是因為被瀏覽器截胡了，所有導致你接收不到伺服器返回的資料。

三.跨域的常見解決方案？

1.在伺服器端的請求頭裡面設定CROS允許跨域

CORS （Cross-Origin Resource Sharing，跨域資源共享）是一個系統，它由一系列傳輸的HTTP頭組成，這些HTTP頭決定瀏覽器是否阻止前端 JavaScript 程式碼獲取跨域請求的響應。

同源安全策略預設阻止“跨域”獲取資源。但是 CORS 給了web伺服器這樣的許可權，即伺服器可以選擇，允許跨域請求訪問到它們的資源。

那怎麼解決呢，英文不好的同學，我們把這段報錯複製到翻譯裡面，翻譯也是我自己經常使用的一個工具。我承認我英文不好，但是有工具替我解決問題。

檢視翻譯，可以明確看到提示：請求的資源上不存在'access control Allow Origin'標頭所以這裡其實已經給出了跨域的解決方案，那就是在後端的請求頭裡面設定CROS允許跨域。（這裡要注意程式碼中並沒有對get請求進行設定，這是因為get請求並不存在跨域問題，比如你在瀏覽器的位址列是可以直接訪問的，利用ajax也是可以了，這裡我就不展示了）

注意一定要放在應用路由之前，建議位置【var app = express();】後面

再次在前端專案中請求，我們發現能正常訪問的，那麼這個跨域問題我們解決了。

2.前端利用proxy代理解決跨域（node正向代理）

前面我們講到了後端在可以在請求頭中設定CROS允許跨域，我們把剛剛在服務端設定跨域問題的程式碼註釋掉，再次復現跨域問題。 \ 在實際專案中比如我們目前市場上大多數使用的都是vue或者react技術棧的專案，如果後端不給解決，或者後端忘記解決了，那我們一定要去求後端解決嗎？同樣都是工程師，為啥要去求後端解決呢？作為前端工程師我們也有自己的解決方案，那就是利用proxy進行代理解決跨，這裡vue2專案為例。

①在前端先建配置檔案vue.config.js，然後配置解決跨域的程式碼。