vue（2.x，3.0）配置跨域代理
更新時間：2019年11月27日 11:11:36 作者：@deer
這篇文章主要介紹了vue（2.x，3.0）配置跨域代理，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
導(dǎo)語：首先，每一個前端開發(fā)人員都應(yīng)該知道同源策略，同源策略是瀏覽器的一個安全功能，不同源的客戶端腳本在沒有明確授權(quán)的情況下，不能讀寫對方資源，所謂同源是指，域名，協(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: {
// 配置服務(wù)器代理
proxy: {
"/apis": { // 代理接口前綴為/apis的請求
"target": 'https://www.baidu.com/', // 對應(yīng)的代理地址
"secure": false, // 接受運(yùn)行在https上，默認(rèn)不接受
"changeOrigin": true, // 如果設(shè)置為true,那么本地會虛擬一個服務(wù)器接收你的請求并代你發(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/", // 目標(biāo)地址
changeOrigin: true, // 是否跨域
pathRewrite: { // 重定向地址
'^/apis': ''
}
}
},
上述就是vue3.0和2.x的配置跨域部分，記得配置完代理需重啟項(xiàng)目?。。?br />
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue-cli axios請求方式及跨域處理問題,文中還給大家提到了vue中axios解決跨域問題和攔截器使用，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-03-03
解決vuejs項(xiàng)目里css引用背景圖片不能顯示的問題
今天小編就為大家分享一篇解決vuejs項(xiàng)目里css引用背景圖片不能顯示的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue基礎(chǔ)語法知識梳理，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-12-12
Vue路由對象屬性 .meta $route.matched詳解
今天小編就為大家分享一篇Vue路由對象屬性 .meta $route.matched詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue實(shí)戰(zhàn)之vue登錄驗(yàn)證的實(shí)現(xiàn)代碼
本篇文章主要介紹了Vue實(shí)戰(zhàn)之vue登錄的實(shí)現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了vue-router 路由傳參用法,結(jié)合實(shí)例形式分析了vue-router 路由傳參基本使用方法及操作注意事項(xiàng),需要的朋友可以參考下2020-03-03
這篇文章主要介紹了Vue綁定對象與數(shù)組變量更改后無法渲染問題解決,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
Vue-router結(jié)合transition實(shí)現(xiàn)app前進(jìn)后退動畫切換效果的實(shí)例
下面小編就為大家?guī)硪黄猇ue-router結(jié)合transition實(shí)現(xiàn)app前進(jìn)后退動畫切換效果的實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
本文主要介紹了Vue?h函數(shù)的使用詳解，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12
Vue2.0實(shí)現(xiàn)自適應(yīng)分辨率
這篇文章主要為大家詳細(xì)介紹了Vue2.0實(shí)現(xiàn)自適應(yīng)分辨率，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11