vue解決浏覽器跨域，設定代理伺服器

跨域本質是浏覽器基于同源政策的一種安全手段

同源政策（Sameoriginpolicy），是一種約定，它是浏覽器最核心也最基本的安全功能

所謂同源（即指在同一個域）具有以下三個相同點

協定相同（protocol）

主機相同（host）

端口相同（port）

反之非同源請求，也就是協定、端口、主機其中一項不相同的時候，這時候就會産生跨域

代理（Proxy）也稱網絡代理，是一種特殊的網絡服務，允許一個（一般為用戶端）通過這個服務與另一個網絡終端（一般為伺服器）進行非直接的連接配接。一些網關、路由器等網絡裝置具備網絡代理功能。一般認為代理服務有利于保障網絡終端的隐私或安全，防止攻擊

方案一

如果是通過​<code>​vue-cli​</code>​腳手架工具搭建項目，我們可以通過​<code>​webpack​</code>​為我們起一個本地伺服器作為請求的代理對象

通過該伺服器轉發請求至目标伺服器，得到結果再轉發給前端，但是最終釋出上線時如果web應用和接口伺服器不在一起仍會跨域

在​<code>​vue.config.js​</code>​檔案，新增以下代碼

如果是vite建立的項目在vite.config.js新增以下代碼

通過​<code>​axios​</code>​發送請求中，配置請求的根路徑

方案二

此外，還可通過服務端實作代理請求轉發

以​<code>​express​</code>​架構為例

方案三

通過配置​<code>​nginx​</code>​實作代理

真正的大師，永遠都懷着一顆學徒的心