vue（2.x，3.0）配置跨域代理
更新時間：2019年11月27日 11:11:36 作者：@deer
這篇文章主要介紹了vue（2.x，3.0）配置跨域代理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
導語：首先，每一個前端開發(fā)人員都應該知道同源策略，同源策略是瀏覽器的一個安全功能，不同源的客戶端腳本在沒有明確授權的情況下，不能讀寫對方資源，所謂同源是指，域名，協(xié)議，端口相同。有一個不同時，都將請求不到資源，將無法“跨域”獲取資源。
vue3.0
從最新版開始，首先是在所有請求的文件中寫好請求
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
let apiCrfCod = Vue.axios.create({
method: 'GET',
baseURL: '/apis/'
})
let apiResource = Vue.axios.create({
method: 'GET',
baseURL: '/service/'
})
getServiceChannels: (opts) => {
return apiCrfCod({
url: '/rest/collection/getService/XXXX', // 此處寫地址，不具體舉例
params: {
...opts
}
})
}
在vue.config.js中配置代理
module.exports = {
baseUrl: '',
outputDir: 'dist',
devServer: {
// 配置服務器代理
proxy: {
"/apis": { // 代理接口前綴為/apis的請求
"target": 'https://www.baidu.com/', // 對應的代理地址
"secure": false, // 接受運行在https上，默認不接受
"changeOrigin": true, // 如果設置為true,那么本地會虛擬一個服務器接收你的請求并代你發(fā)送該請求，這樣就不會有跨域問題（只適合開發(fā)環(huán)境）
"pathRewrite": { //重寫路徑 比如'/apis/aaa/ccc'重寫為'/aaa/ccc'
'^/apis': ''
}
},
// 配置多個代理
"/service": {
"target": 'https://www.google.com/',
"secure": false,
"changeOrigin": true,
},
}
},
}
vue2.X
請求還是按上述代碼，下面是配置代理部分
在config文件夾下的index.js中，配置proxyTable，原本的proxyTable中為空
proxyTable: {
'/apis': {
target: "https://www.baidu.com/", // 目標地址
changeOrigin: true, // 是否跨域
pathRewrite: { // 重定向地址
'^/apis': ''
}
}
},
上述就是vue3.0和2.x的配置跨域部分，記得配置完代理需重啟項目?。。?br />
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
vuejs+element UI點擊編輯表格某一行時獲取內容填入表單的示例
這篇文章主要介紹了vuejs+element UI點擊編輯表格某一行時獲取內容填入表單的示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
Template?ref在Vue3中的實現(xiàn)原理詳解
這篇文章主要為大家介紹了Template?ref在Vue3中的實現(xiàn)原理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
Vue計算屬性與監(jiān)視屬性實現(xiàn)方法詳解
最近在學習vue,學習中遇到了一些感覺挺重要的知識點,感覺有必要整理下來,這篇文章主要給大家介紹了關于Vue.js中計算屬性、監(jiān)視屬性的相關資料,需要的朋友可以參考下2022-08-08
Vue作為一款流行的前端框架,提供了一種數(shù)據驅動的方式來實現(xiàn)目錄樹,本文主要介紹了vue?目錄樹的展開與關閉的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2023-11-11
關于vue的element-ui web端引入高德地圖并獲取經緯度
這篇文章主要介紹了關于vue的element-ui web端引入高德地圖并獲取經緯度,高德地圖首先要去申請key和密鑰,文中提供了部分實現(xiàn)代碼和解決思路,感興趣的朋友可以學習一下2023-04-04
這篇文章主要介紹了Vue中的change事件無效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
使用Vue3和Echarts?5繪制帶有立體感流線中國地圖(推薦收藏!)
最近接到一個需求是做一個中國地圖,下面這篇文章主要給大家介紹了關于如何使用Vue3和Echarts?5繪制帶有立體感流線中國地圖的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-04-04
vue中 數(shù)字相加為字串轉化為數(shù)值的例子
今天小編就為大家分享一篇vue中 數(shù)字相加為字串轉化為數(shù)值的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue項目localhost:8080無法訪問此網站，拒絕了我們的連接請求的解決方案
前端頁面使用的是vue,vue項目啟動成功,沒有任何報錯,服務控制臺已出現(xiàn)APP訪問地址,點擊訪問地址出現(xiàn)無法訪問此網站,拒絕了我們的連接請求,所以本文給大家介紹了Vue項目localhost:8080無法訪問此網站,拒絕了我們的連接請求的解決方案,需要的朋友可以參考下2024-12-12
本篇文章主要介紹了Vue中如何實現(xiàn)輪播圖的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07