vue項(xiàng)目中常用解決跨域的方法總結(jié)(CORS和Proxy)
一、什么是跨域？
跨域問(wèn)題的出現(xiàn)是因?yàn)闉g覽器的同源策略問(wèn)題。所謂同源就是必須有以下三個(gè)相同點(diǎn)：協(xié)議相同、主機(jī)相同、端口相同。如果其中有一項(xiàng)不同，即出現(xiàn)非同源請(qǐng)求，就會(huì)產(chǎn)生跨域。當(dāng)我們請(qǐng)求一個(gè)接口的時(shí)候，出現(xiàn)如：Access-Control-Allow-Origin 字眼的時(shí)候說(shuō)明請(qǐng)求跨域了
二、如何解決跨域？
跨域的解決方案：
jsonp
cors
Node中間件代理(兩次跨域) 即 Proxy
nginx反向代理 CORS支持所有類型的HTTP請(qǐng)求，是跨域HTTP請(qǐng)求的根本解決方案
JSONP只支持GET請(qǐng)求，JSONP的優(yōu)勢(shì)在于支持老式瀏覽器，以及可以向不支持CORS的網(wǎng)站請(qǐng)求數(shù)據(jù)。
不管是Node中間件代理還是nginx反向代理，主要是通過(guò)同源策略對(duì)服務(wù)器不加限制。
日常工作中，用得比較多的跨域方案是cors和nginx反向代理
主要解釋CROS和Proxy兩種方式
1、CROS
- CROS是 Cross-Origin Resource Sharing的縮寫，翻譯過(guò)來(lái)就是跨域資源共享的意思。它由一系列傳輸?shù)腍TTP頭組成，這些HTTP頭會(huì)決定瀏覽器是否阻止前端 JavaScript代碼獲取跨域請(qǐng)求的響應(yīng)。
- CORS的實(shí)現(xiàn)比較簡(jiǎn)單方便，只需要增加一些 HTTP頭，讓服務(wù)器能聲明允許的訪問(wèn)來(lái)源。只要后端實(shí)現(xiàn)了 CROS就實(shí)現(xiàn)了跨域。
2、Proxy（代理）
- 通過(guò)啟動(dòng)本地服務(wù)器進(jìn)行代理轉(zhuǎn)發(fā)目標(biāo)服務(wù)器。而跨域只針對(duì)于瀏覽器，對(duì)于node服務(wù)發(fā)出的請(qǐng)求是不會(huì)出來(lái)跨域的，從而解決了跨域的問(wèn)題。
- 在vue.config.js文件
1、可配置多個(gè)不同的proxy
devServer: {
proxy: {
'/api': {//代理標(biāo)識(shí)，一般是每個(gè)接口前的相同部分
target: 'http://23.15.11.15:8000', // 這里寫的是訪問(wèn)接口的域名和端口號(hào)
changeOrigin: true, // 允許跨域請(qǐng)求
pathRewrite: { // 重寫路徑，替換請(qǐng)求地址中的指定路徑
'^/api': '/user'
}
},
'/login': {
target: 'http://23.15.11.15:8000',
changeOrigin: true,
pathRewrite:{
'^/login':'' //替換成空
}
}
}
},
示例：
- http://localhost:8080/api/test --> http://23.15.11.15:8000/user/test
- http://localhost:8080/login/index–> http://23.15.11.15:8000/index
2、對(duì)所有的接口都代理
devServer: {
proxy: 'http:/www.ljc.com'
}
示例：
- http://localhost:8080/api/test --> http://www.ljc.com/api/test
- http://localhost:8080/login/index–> http://www.ljc.com/login/index
總結(jié)
到此這篇關(guān)于vue項(xiàng)目中常用解決跨域的文章就介紹到這了,更多相關(guān)vue解決跨域方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
VUE3中實(shí)現(xiàn)拖拽與縮放自定義看板vue-grid-layout詳解
想實(shí)現(xiàn)桌面自由拖拽布局的效果,找到了vue-grid-layout柵格布局插件,可以完美解決,下面這篇文章主要給大家介紹了關(guān)于VUE3中實(shí)現(xiàn)拖拽與縮放自定義看板vue-grid-layout的相關(guān)資料,需要的朋友可以參考下2023-02-02
本文主要介紹了vue中watch監(jiān)聽不到變化的解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
vue2中的el-select組件數(shù)據(jù)太多,如何實(shí)現(xiàn)滾動(dòng)加載數(shù)據(jù)效果
這篇文章主要介紹了vue2中的el-select組件數(shù)據(jù)太多,如何實(shí)現(xiàn)滾動(dòng)加載數(shù)據(jù)效果,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
詳解webpack + vue + node 打造單頁(yè)面(入門篇)
本篇文章主要介紹了詳解webpack + vue + node 打造單頁(yè)面(入門篇) ，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-09-09
在前端開發(fā)中,獲取登錄用戶的用戶名是一項(xiàng)常見(jiàn)的需求,這篇文章主要給大家介紹了關(guān)于前端Vue如何獲取登錄的用戶名或用戶id的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
一步步從Vue3.x源碼上理解ref和reactive的區(qū)別
vue3的數(shù)據(jù)雙向綁定,大家都明白是proxy數(shù)據(jù)代理,但是在定義響應(yīng)式數(shù)據(jù)的時(shí)候,有ref和reactive兩種方式,如果判斷該使用什么方式,是大家一直不很清楚地問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于從Vue3.x源碼上理解ref和reactive的區(qū)別的相關(guān)資料,需要的朋友可以參考下2023-02-02
Vue實(shí)戰(zhàn)之vue登錄驗(yàn)證的實(shí)現(xiàn)代碼
本篇文章主要介紹了Vue實(shí)戰(zhàn)之vue登錄的實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
Vue2.0實(shí)現(xiàn)1.0的搜索過(guò)濾器功能實(shí)例代碼
本篇文章主要介紹了Vue2.0實(shí)現(xiàn)1.0的搜索過(guò)濾器功能實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
淺談Vue render函數(shù)在ElementUi中的應(yīng)用
今天小編就為大家分享一篇淺談Vue render函數(shù)在ElementUi中的應(yīng)用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue開發(fā)項(xiàng)目中如何使用Font Awesome 5
Font Awesome是一套流行的圖標(biāo)字體庫(kù),我們?cè)趯?shí)際開發(fā)的過(guò)程中會(huì)經(jīng)常遇到需要使用圖標(biāo)的場(chǎng)景,對(duì)于一些常用的圖標(biāo),我們可以直接在Font Awesome中找到并且使用,這篇文章主要給大家介紹了關(guān)于Vue開發(fā)項(xiàng)目中如何使用Font Awesome5的相關(guān)資料,需要的朋友可以參考下2021-11-11