跨域這個問題,可以說是前端的必需了解的,但是多少人是知其然不知所以然呢? 下面我們來梳理一下vue解決跨域的思路。
什么情況會跨域?
? 跨域的本質就是瀏覽器基于同源策略的一種安全手段。所謂同源就是必須有以下三個相同點:協議相同、域名相同、端口相同。如果其中有一項不同,即出現非同源請求,就會產生跨域。
? 跨域實際上是瀏覽器的限制,開發中使用 postman請求接口能夠獲得數據就印證了跨域是瀏覽器的限制這個問題。
那瀏覽器為什么要弄個跨域出來?
總的來說:瀏覽器跨域機制的主要目的是保護用戶的安全和隱私.
為什么說跨域能保護用戶的隱私呢 ?? 比如說你打開了某個銀行的官網 xxyh.com,然后又打開了一個惡意網站 xxxx.com,此時兩個網站的域名肯定是不同的,這時候這個惡意的網站想從你銀行網站中獲取你的cookie等個人信息,那么瀏覽器就會阻止它的請求.??
我們開發過程中為什么會出現跨域?
剛才說了,協議、端口、域名,只要有一個不同,請求就會跨域。而我們開發中,項目運行在http://localhost:3000 上,這時候協議是?http
,端口是?3000
,域名是?localhost
。而我們的請求一般是發到了后端給的服務器API地址,這時候協議端口域名出現不同了就會跨域 !
解決方法
? 一般前端中解決跨域問題的方法有 JSONP,CROS,Proxy等,這里我們主要講解一下在 vue中常用的 CORS方法:
一般來說,我們會在vue.config.js中配置proxy反向代理來解決跨域,但是解決的邏輯是怎樣的呢?
拿我的項目來舉例:首先,我們要知道proxy中代碼的作用:
// 接口轉發proxy: {'/dev': {target: APIURl, // 后端服務器的地址changeOrigin: true, // 設置為 true,允許跨域pathRewrite: {'^/dev': '' // 可選的,重寫請求路徑,如果后端接口的路徑中有特定的前綴,可以進行替換}}}
'/dev',這里指定了一個路徑匹配規則,當前端發起的請求路徑以'/dev'開頭的時候會觸發反向代理配置.
所以想要發起的請求走反向代理,就需要我們的請求是以'/dev'開頭,但是我們封裝的api的路徑里面好像并沒有開頭寫上'/dev',而且如果每個api都需要帶上'/dev'的話,那需要在封裝axios請求的時候每次在路徑前面加上'/dev'也太麻煩了吧.
于是,我們可以在請求攔截器中設置請求的基地址為'/dev',然后每次請求都自動在請求路徑前面帶上了'/dev',就完成了每次請求都走反向代理這個需求.
請求攔截器? request:? ??
?我的基地址是配置在環境變量中的,他在環境變量中是:
?也就等價于:
const service = axios.create({baseURL:'/dev', // url = base url + request urlwithCredentials: false, // send cookies when cross-domain requeststimeout: define.timeout, // request timeout
})
這樣,我們就給每個請求路徑前面都加上了'/dev',然后在vue.config.js中,proxy發現我們的請求是'/dev'開頭的,就會將我們的請求代理到:
target: APIURl, // 填你后端服務器的地址
并且設置:
changeOrigin: true, // 設置為 true,允許跨域
然后這個配置的作用:
pathRewrite: {'^/dev': '' // 可選的,重寫請求路徑,如果后端接口的路徑中有特定的前綴,可以進行替換}
因為我們前面說了,'/dev'這個字符串的作用只是一個標識,我們給每個請求的開頭都加上這個標識,就能夠被反向代理識別到然后就能允許跨域 , 而后端給我的實際請求路徑中是沒有'/dev'的,所以,我們在他進入反向代理后,又要將他重寫為 ' ', 讓他不影響真正的請求路徑.?
舉個例子:反向代理就像一個保安,每天都有很多人要從代理過去,但是保安怎么分辨出哪些請求是要讓他通過的呢? 這時候領導和保安說,你看到那些人手里拿著員工牌牌(‘/dev’)的就讓他通過,而我們在請求攔截器中給每個請求前加上了'/dev' ,所以我們的請求就都能代理到真實請求的服務器上去啦 !
然后,既然跨域是瀏覽器的保護機制,那么我們是不是可以將自己瀏覽器的保護機制關了,讓我們在開發中可以直接發起跨域請求呢??
可以!? 看我的這篇文章 :
谷歌關閉跨域限制.(生成一個開發瀏覽器),Chrome關閉跨域
希望對你有用!? !? !
有用的話別忘了點贊哦 ! ! !