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