vue.js 配置了前端代理卻未能生效

記錄一下最近踩得小坑：

配置完代理后請(qǐng)一定重新執(zhí)行（重要，非常重要！）

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直接訪問是否正常 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è)參考，也希望大家多多支持好吧啦網(wǎng)。