Vue使用Proxy代理后仍無法生效的解決
更新時間：2020年11月13日 10:03:24 作者：Piepie__
這篇文章主要介紹了Vue使用Proxy代理后仍無法生效的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
vue.js 配置了前端代理卻未能生效
記錄一下最近踩得小坑：
配置完代理后請一定重新執(zhí)行（重要，非常重要?。?/p>
npm run dev
若重新執(zhí)行命令后，代理仍為生效，請按下方步驟進行檢查：
檢查index.js文件中的代理是否配置正確，示例如下：
proxyTable: {
'/api': { //代理標識
target: 'http://xxx.xxx.xxx',//指向的實際地址
changeOrigin: true, // 允許跨域
pathRewrite: {
// 標識替換
// 原請求地址為 /api/getData 將'/api'替換''時，
// 代理后的請求地址為： http://xxx.xxx.xxx/getData
// 若替換為'/other',則代理后的請求地址為 http://xxx.xxx.xxx/other/getData
'^/api': ''
}
}
},
檢查請求路徑是否正確,以上方所配置的代理為例
// 請確認原請求中是否包含代理標識符
// 請確認接口 http://xxx.xxx.xxx/getData直接訪問是否正常
this.$axios.get('/api/getData').then((r)=>{
console.log(r)
})
補充知識：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代理后仍無法生效的解決就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue2+springsecurity權(quán)限系統(tǒng)的實現(xiàn)
本文主要介紹了vue2+springsecurity權(quán)限系統(tǒng)的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
Vue實例中生命周期created和mounted的區(qū)別詳解
這篇文章主要給大家介紹了關(guān)于Vue實例中生命周期created和mounted區(qū)別的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08
目前項目中比較常用的第三方支付無非就是支付寶支付和微信支付。下面介紹一下Vue中H5頁面如何使用支付寶支付。這篇文章主要介紹了Vue的H5頁面喚起支付寶支付,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了Vue動畫之第三方類庫實現(xiàn)動畫方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
在組件中修改 Vuex 中的 state,根據(jù)使用的 Vue 版本（Vue 2 或 Vue 3）不同,有不同的操作方式,但總體思路都是借助 Vuex 提供的 mutations 或 actions 來實現(xiàn),以下分別介紹兩種版本下的具體實現(xiàn)方法,需要的朋友可以參考下2025-02-02
這篇文章主要介紹了vue實現(xiàn)可拖拽div大小的方法,可封裝為全局方法在項目中所需要地方直接調(diào)用（mixins），本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-04-04
這篇文章主要介紹了如何使用ant-design-vue的Table組件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
前端H5微信支付寶支付實現(xiàn)方法(uniapp為例)
最近上線一個項目,手機網(wǎng)站進行調(diào)起支付寶App支付,做起來還是滿順手的,在此做個記錄,這篇文章主要給大家介紹了關(guān)于前端H5微信支付寶支付實現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下2024-04-04
在現(xiàn)代Web開發(fā)中,Vue.js成為前端開發(fā)者構(gòu)建單頁應(yīng)用的熱門框架,Nginx以其高性能和穩(wěn)定性,成為部署Vue項目的理想選擇,這篇文章主要介紹了Nginx部署前端Vue項目的步驟、常見問題與解決方案,需要的朋友可以參考下2024-09-09
vscode 配置vue+vetur+eslint+prettier自動格式化功能
這篇文章主要介紹了vscode 配置vue+vetur+eslint+prettier自動格式化功能，本文通過實例代碼圖文的形式給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03