vue 設(shè)置proxyTable參數(shù)進行代理跨域
什么是代理跨域
瀏覽器之間有同源策略，出于安全考慮不同域之間不允許獲取數(shù)據(jù)，除了幾個特殊的例子
<img>、<script>、<audio>等標簽可以進行跨域但是通常都是以get的形式，如果用js的axios去遠程獲取的話進會觸發(fā)同源政策，除非你服務端的代碼設(shè)置了header同意讓你訪問，明顯這很不合理呀！?，F(xiàn)在不是都流行前后端的分離嗎，后端代碼跑掉了只剩下前端了，兩個次元的代碼我前端該怎么獲取啊，感覺使用跨域好麻煩好難搞啊還不一定搞得到，這個時候就可以用到代理跨域了
代理跨域原理
所謂代理就是代替前端而是用后端發(fā)出http請求，就如vue的腳手架中，要運行項目你要輸入npm run dev或npm run start吧，這個命令其實打開它已經(jīng)配置好的node服務器，vue腳手架的代理就是通過node來代替前臺發(fā)起http請求，既然不是瀏覽器發(fā)起的請求那不是就很容易啦？
vue腳手架如何代理跨域，找到在config文件夾下的index.js文件，文件中有個dev，在里面找到proxyTable{}，對它進行修改
proxyTable: {
'/api': {
target: 'https://www.xxx.com/',//你要跨的域
changeOrigin: true,
pathRewrite: {
'^/api': '/api',
},
headers:{
//這邊可以堆headers進行設(shè)置
}
},
},
其中target是你要跨域的地址，/api是你所跨的域下的下一級路徑，像上面這樣就是獲取https://www.xxx.com/api下的東西，然后我們引入一個ajax的包axios并進行ajax
import axios from 'axios'
axios.get('/getMessage').then(()=>{})
上面的代碼執(zhí)行后，會自動幫你跨域獲取到https://www.xxx.com/api/getMessage的數(shù)據(jù)
總結(jié)
以上所述是小編給大家介紹的vue 設(shè)置proxyTable參數(shù)進行代理跨域，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
教你如何在 Nuxt 3 中使用 wavesurfer.js
這篇文章主要介紹了如何在 Nuxt 3 中使用 wavesurfer.js,本文結(jié)合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
圖文詳解vue中proto文件的函數(shù)調(diào)用
這篇文章主要給大家介紹了vue中proto文件函數(shù)調(diào)用的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家學習或者使用vue具有一定的參考學習價值,需要的朋友可以參考下2021-08-08
最近做項目的時候遇到了動態(tài)加載圖片的需求,所以這里給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于Vue項目動態(tài)加載圖片的正確寫法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-04-04
淺談Vue3 Composition API如何替換Vue Mixins
這篇文章主要介紹了淺談Vue3 Composition API如何替換Vue Mixins，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
這篇文章主要為大家詳細介紹了vue使用el-upload實現(xiàn)文件上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要給大家介紹了關(guān)于如何使用Vue做個簡單的比較兩個數(shù)字大小頁面的相關(guān)資料,實現(xiàn)一個比較兩個數(shù)字大小的頁面，練習Vue實例的創(chuàng)建、數(shù)據(jù)綁定和事件監(jiān)聽方法,需要的朋友可以參考下2023-10-10
這篇文章主要為大家詳細介紹了Vue自定義圖片懶加載指令v-lazyload，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
一文詳解Pinia和Vuex與兩個Vue狀態(tài)管理模式
這篇文章主要介紹了一文詳解Pinia和Vuex與兩個Vue狀態(tài)管理模式，Pinia和Vuex一樣都是是vue的全局狀態(tài)管理器。其實Pinia就是Vuex5，只不過為了尊重原作者的貢獻就沿用了這個看起來很甜的名字Pinia2022-08-08
本文主要介紹了Vue項目Nginx子目錄部署(Vite和Vue-CLI),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-05-05
這篇文章主要介紹了5分鐘學會Vue動畫效果(小結(jié)),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07