在vue.config.js中配置開發環境的代理，測試登錄的時候還是可以訪問後台接口的，在測試獲取用戶信息接口的時候發現代理無效了。測試獲取用戶信息接口的時候将請求進行了重新封裝，具體可以參考文章【Vue實戰037：axios二次封裝和使用】。封裝之後再次請求後台接口時發現訪問的ip變成了localhost，導緻怎麼請求都是錯誤：404 (Not Found)。

之前也寫過一篇關于前端跨域的問題：【Vue實戰057：前端解決No 'Access-Control-Allow-Origin' 跨域問題詳解】，而且這個配置之前也是生效的。這就讓人非常的頭疼了....，後台無法請求後續的工作就無法繼續了。最郁悶的是我讓後台設置了跨域還是無法訪問，這裡發現利用axios.defaults.baseURL配置的遠程地址沒有生效，請求到的依舊是localhost。

為了判定是否是因為axios封裝引起的問題，我在登錄頁面直接通過axios測試了post請求，但是依舊還是請求到了localhost的地址。所以問題不是出在axios封裝上面，感覺還是代理配置沒有生效！回家後還把前幾天備份的代碼拿出來重新試了下，之前都沒有任何的axios封裝竟然也不能跨域請求....。

添加debugger開始調試彈出提示：Cannot read property 'post' of undefined"，通過逐步調試發現axios竟然都是ReferenceError:axios is not defined，連axios都找不到當然也就無法找到axios封裝的post方法了。難道是axios依賴包出現問題了？将node_modules删除後重新下載所有的依賴包測試，結果還是一樣的錯誤！！！重新建了一個新項目，用一個button測試axios.post請求竟然也失敗？？？

花了大半天的時間終于讓我找到問題了，原來就是baseURL在搞鬼。baseURL的運行層級高于代理URL，如果存在baseURL則不運行代理服務。所以這裡我們在設置需要清除掉baseURL配置，這裡我們通過axios.create創建axios實例來清除baseURL配置（axios.defaults.baseURL = ''無效哦，axios都沒定義哪來的baseURL ？）。

baseURL定義後端的絕對地址時就會報跨域提示：No 'Access-Control-Allow-Origin' header，定義相對地址就會自動拼接localhost:port，定義為空時優先選擇proxy代理配置。這個昨天在家裡試了下axios封裝的時候是有用的，不過今天又重新研究了下發現baseURL還是可以配置的（看來前面的結論被推翻了==>配置baseURL會跳過代理）。

如果後台接口地址中存在 '/api' 前綴就可以把 pathRewrite 删掉，如果沒有就需要通過pathRewrite重寫路徑運行後代理到對應地址将映射的'^/api'去除掉。請求數據時URL前加上“/api”就可以跨域請求了，proxy代理配中的/api限定了隻有接口中含有該路徑的接口才會被代理。proxy代理配置中的target設置建議隻填目标地址和端口，不要直接帶接口名，配置完之後重啟服務。

代理一般都是由後台來配置的，很少在前端配置所以遇到這種問題也是讓人特别讓人腦殼疼。以上内容是小編給大家分享的【Vue實戰087：cli4配置proxy代理失效問題解決】，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回複大家的。更多Vue實戰技巧可以參考以下專欄：

這裡做個記錄，下面附上本文用到的源碼：

//完整的請求地址：http://10.134.112.186:8010/api/login //main.js import axios from 'axios' // 引入axios axios.defaults.baseURL = '/api' //vue.config.js配置proxy代理 proxy: { '/api': { target: 'http://10.134.112.186:8010/api', // API服務器的地址 changeOrigin: true, // 設置是否允許跨域 默認false } } //請求方法，省略判斷 HandleLogin () { this.$axios.post('/login', this.$qs.stringify(this.loginForm)).then(res => { console.log(res) this.$router.push({ path: '/home' })} }).catch(() => { this.loading = false })}else {return false} }) }, --------------------------------------axios封裝的配置-------------------------------------- proxy: { // 設置代理 '/api': { // 将域名印射到"/api" target: 'http://10.134.112.186:8010', // 目标服務器接口 changeOrigin: true, // 設置是否允許跨域 默認false pathRewrite: { '^/api': '' // 重寫路徑運行後就代理到對應地址 } } } HandleLogin () { this.loading = true this.$refs['rulesForm'].validate(valid => { if (valid) { this.$axios.post('/login', this.$qs.stringify(this.loginForm)).then(res => { if(res.status===200){ this.loading = false this.$router.push({ path: '/home' })} }).catch(() => { this.loading = false })}else {return false} }) }, import axios from 'axios' // 引入axios const service = axios.create({ baseURL: '', // 設置了proxy代理時這裡為空，否則代理會失效 timeout: 1000 //超時 }) //下面可以添加請求攔截器來處理請求發出前的操作和響應攔截器處理響應數據後的操作，這裡忽略！ export default service

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!