vue 設(shè)置proxyTable參數(shù)進(jìn)行代理跨域
什么是代理跨域
瀏覽器之間有同源策略，出于安全考慮不同域之間不允許獲取數(shù)據(jù)，除了幾個(gè)特殊的例子
<img>、<script>、<audio>等標(biāo)簽可以進(jìn)行跨域但是通常都是以get的形式，如果用js的axios去遠(yuǎn)程獲取的話進(jìn)會(huì)觸發(fā)同源政策，除非你服務(wù)端的代碼設(shè)置了header同意讓你訪問，明顯這很不合理呀！?，F(xiàn)在不是都流行前后端的分離嗎，后端代碼跑掉了只剩下前端了，兩個(gè)次元的代碼我前端該怎么獲取啊，感覺使用跨域好麻煩好難搞啊還不一定搞得到，這個(gè)時(shí)候就可以用到代理跨域了
代理跨域原理
所謂代理就是代替前端而是用后端發(fā)出http請(qǐng)求，就如vue的腳手架中，要運(yùn)行項(xiàng)目你要輸入npm run dev或npm run start吧，這個(gè)命令其實(shí)打開它已經(jīng)配置好的node服務(wù)器，vue腳手架的代理就是通過node來代替前臺(tái)發(fā)起http請(qǐng)求，既然不是瀏覽器發(fā)起的請(qǐng)求那不是就很容易啦？
vue腳手架如何代理跨域，找到在config文件夾下的index.js文件，文件中有個(gè)dev，在里面找到proxyTable{}，對(duì)它進(jìn)行修改
proxyTable: {
'/api': {
target: 'https://www.xxx.com/',//你要跨的域
changeOrigin: true,
pathRewrite: {
'^/api': '/api',
},
headers:{
//這邊可以堆headers進(jìn)行設(shè)置
}
},
},
其中target是你要跨域的地址，/api是你所跨的域下的下一級(jí)路徑，像上面這樣就是獲取https://www.xxx.com/api下的東西，然后我們引入一個(gè)ajax的包axios并進(jìn)行ajax
import axios from 'axios'
axios.get('/getMessage').then(()=>{})
上面的代碼執(zhí)行后，會(huì)自動(dòng)幫你跨域獲取到https://www.xxx.com/api/getMessage的數(shù)據(jù)
總結(jié)
以上所述是小編給大家介紹的vue 設(shè)置proxyTable參數(shù)進(jìn)行代理跨域，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了vuex的使用和簡(jiǎn)易實(shí)現(xiàn)，幫助大家更好的理解和使用vuex，感興趣的朋友可以了解下2021-01-01
vue前端實(shí)現(xiàn)表格數(shù)據(jù)增查改刪功能
增刪改查是我們寫項(xiàng)目百分之七十會(huì)遇到的代碼,下面這篇文章主要給大家介紹了關(guān)于vue前端實(shí)現(xiàn)表格數(shù)據(jù)增查改刪功能的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05
在Vue項(xiàng)目中使用Element UI的表格組件時(shí),可以通過具體的單元格渲染方法添加超鏈接,在表格的某列中,利用模板或渲染函數(shù)插入<a>標(biāo)簽,設(shè)置其href屬性指向目標(biāo)URL,實(shí)現(xiàn)點(diǎn)擊跳轉(zhuǎn)功能,此方法適用于需要從表格信息中快速導(dǎo)航到相關(guān)詳細(xì)頁面的場(chǎng)景2024-09-09
Vue AST的轉(zhuǎn)換實(shí)現(xiàn)方法講解
本節(jié)，我們將討論關(guān)于AST的轉(zhuǎn)換。所謂AST的轉(zhuǎn)換，指的是對(duì)AST進(jìn)行一系列操作，將其轉(zhuǎn)換為新的AST的過程。新的AST可以是原語言或原DSL的描述，也可以是其他語言或其他DSL的描述。例如，我們可以對(duì)模板AST進(jìn)行操作，將其轉(zhuǎn)換為JavaScriptAST2023-01-01
這篇文章主要為大家介紹了vue 使用vue-cropper裁剪圖片，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
vue elementUI實(shí)現(xiàn)自定義正則規(guī)則驗(yàn)證
本文主要介紹了vue elementUI實(shí)現(xiàn)自定義正則規(guī)則驗(yàn)證，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
在本篇內(nèi)容里小編給大家整理了關(guān)于vue寫h5頁面的方法以及注意點(diǎn)分析，有需要的朋友們跟著學(xué)習(xí)下吧。2019-02-02
vue.js學(xué)習(xí)筆記之綁定style樣式和class列表
數(shù)據(jù)綁定一個(gè)常見需求是操作元素的 class 列表和它的內(nèi)聯(lián)樣式。這篇文章主要介紹了vue.js綁定style和class的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了Vue精簡(jiǎn)版風(fēng)格指南的相關(guān)資料，包括組件名稱，指令及特征,需要的朋友可以參考下2018-01-01
vue項(xiàng)目如何部署運(yùn)行到tomcat上
這篇文章主要介紹了vue項(xiàng)目如何部署運(yùn)行到tomcat上的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01