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同意讓你訪問，明顯這很不合理呀！。現(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)文章
教你如何在 Nuxt 3 中使用 wavesurfer.js
這篇文章主要介紹了如何在 Nuxt 3 中使用 wavesurfer.js,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
圖文詳解vue中proto文件的函數(shù)調(diào)用
這篇文章主要給大家介紹了vue中proto文件函數(shù)調(diào)用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-08-08
Vue項(xiàng)目動(dòng)態(tài)加載圖片正確寫法
最近做項(xiàng)目的時(shí)候遇到了動(dòng)態(tài)加載圖片的需求,所以這里給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目動(dòng)態(tài)加載圖片的正確寫法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
淺談Vue3 Composition API如何替換Vue Mixins
這篇文章主要介紹了淺談Vue3 Composition API如何替換Vue Mixins，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
vue使用el-upload實(shí)現(xiàn)文件上傳功能
這篇文章主要為大家詳細(xì)介紹了vue使用el-upload實(shí)現(xiàn)文件上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
如何使用Vue做個(gè)簡單的比較兩個(gè)數(shù)字大小頁面
這篇文章主要給大家介紹了關(guān)于如何使用Vue做個(gè)簡單的比較兩個(gè)數(shù)字大小頁面的相關(guān)資料,實(shí)現(xiàn)一個(gè)比較兩個(gè)數(shù)字大小的頁面，練習(xí)Vue實(shí)例的創(chuàng)建、數(shù)據(jù)綁定和事件監(jiān)聽方法,需要的朋友可以參考下2023-10-10
這篇文章主要為大家詳細(xì)介紹了Vue自定義圖片懶加載指令v-lazyload，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
一文詳解Pinia和Vuex與兩個(gè)Vue狀態(tài)管理模式
這篇文章主要介紹了一文詳解Pinia和Vuex與兩個(gè)Vue狀態(tài)管理模式，Pinia和Vuex一樣都是是vue的全局狀態(tài)管理器。其實(shí)Pinia就是Vuex5，只不過為了尊重原作者的貢獻(xiàn)就沿用了這個(gè)看起來很甜的名字Pinia2022-08-08
Vue項(xiàng)目Nginx子目錄部署(Vite和Vue-CLI)
本文主要介紹了Vue項(xiàng)目Nginx子目錄部署(Vite和Vue-CLI),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-05-05
5分鐘學(xué)會(huì)Vue動(dòng)畫效果(小結(jié))
這篇文章主要介紹了5分鐘學(xué)會(huì)Vue動(dòng)畫效果(小結(jié)),小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07