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

記錄一下最近踩得小坑：

配置完代理后請一定重新執行（重要，非常重要！）

npm run dev

若重新執行命令后，代理仍為生效，請按下方步驟進行檢查：

檢查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設置接口代理

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、設置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、重啟服務器 npm run dev就好啦~

以上這篇Vue使用Proxy代理后仍無法生效的解決就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。