Vue使用Proxy代理后仍無(wú)法生效的解決
更新時(shí)間：2020年11月13日 10:03:24 作者：Piepie__
這篇文章主要介紹了Vue使用Proxy代理后仍無(wú)法生效的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
vue.js 配置了前端代理卻未能生效
記錄一下最近踩得小坑：
配置完代理后請(qǐng)一定重新執(zhí)行（重要，非常重要?。?/p>
npm run dev
若重新執(zhí)行命令后，代理仍為生效，請(qǐng)按下方步驟進(jìn)行檢查：
檢查index.js文件中的代理是否配置正確，示例如下：
proxyTable: {
'/api': { //代理標(biāo)識(shí)
target: 'http://xxx.xxx.xxx',//指向的實(shí)際地址
changeOrigin: true, // 允許跨域
pathRewrite: {
// 標(biāo)識(shí)替換
// 原請(qǐng)求地址為 /api/getData 將'/api'替換''時(shí)，
// 代理后的請(qǐng)求地址為： http://xxx.xxx.xxx/getData
// 若替換為'/other',則代理后的請(qǐng)求地址為 http://xxx.xxx.xxx/other/getData
'^/api': ''
}
}
},
檢查請(qǐng)求路徑是否正確,以上方所配置的代理為例
// 請(qǐng)確認(rèn)原請(qǐng)求中是否包含代理標(biāo)識(shí)符
// 請(qǐng)確認(rèn)接口 http://xxx.xxx.xxx/getData直接訪問(wèn)是否正常
this.$axios.get('/api/getData').then((r)=>{
console.log(r)
})
補(bǔ)充知識(shí)：vue使用proxyTable設(shè)置接口代理
1、修改config/index.js里proxyTable
proxyTable: {
'/api': {
target: 'http://192.168.42.182:8080',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
},
}
2、修改config/dev.env.js
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API: '"/api"' // 加入這一句
})
3、設(shè)置axios的baseUrl
export default {
get (url, params) {
return axios({
method: 'get',
baseURL: process.env.API, // 修改這里
url,
params,
timeout: 100000
}).then((response) => {
return checkStatus(response)
}).then((res) => {
return checkCode(res)
})
}
}
4、重啟服務(wù)器 npm run dev就好啦~
以上這篇Vue使用Proxy代理后仍無(wú)法生效的解決就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue中require與import的區(qū)別詳解,require相當(dāng)于module.exports的傳送門,module.exports后面的內(nèi)容是什么,require的結(jié)果就是什么,對(duì)象、數(shù)字、字符串、函數(shù),再把require的結(jié)果賦值給某個(gè)變量,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了vue3沒(méi)有this的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
Axios是一個(gè)功能強(qiáng)大、易用性高的HTTP庫(kù),適用于大多數(shù)的前端項(xiàng)目,它提供了豐富的功能和靈活的配置選項(xiàng),可以滿足不同項(xiàng)目的需求,這篇文章主要介紹了vue中使用axios的作用,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了在vue中使用G2圖表的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
解決Vue警告Write?operation?failed:computed?value?is?readonl
這篇文章主要給大家介紹了關(guān)于如何解決Vue警告Write?operation?failed:computed?value?is?readonly的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
ElementUI修改實(shí)現(xiàn)更好用圖片上傳預(yù)覽組件
這篇文章主要為大家介紹了ElementUI修改實(shí)現(xiàn)更好用圖片上傳預(yù)覽組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
Vue-cli@3.0 插件系統(tǒng)簡(jiǎn)析
Vue-cli@3.0 是一個(gè)全新的 Vue 項(xiàng)目腳手架。這篇文章主要介紹了Vue-cli@3.0 插件系統(tǒng)簡(jiǎn)析,需要的朋友可以參考下2018-09-09
Vue El-descriptions 描述列表功能實(shí)現(xiàn)
這篇文章主要介紹了Vue El-descriptions 描述列表功能實(shí)現(xiàn),Descriptions 描述列表,列表形式展示多個(gè)字段,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05
本文主要介紹了淺談Vue?DIFF，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
vue .js綁定checkbox并獲取、改變選中狀態(tài)的實(shí)例
今天小編就為大家分享一篇vue .js綁定checkbox并獲取、改變選中狀態(tài)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08