Vuecli3配置代理及遇到的問(wèn)題解決
配置方法
內(nèi)容說(shuō)明：
此處前端應(yīng)用的端口為8088,后端應(yīng)用的端口為8052，域都為localhost
后端接口為http://localhost:8052/Menu/xxxx。
配置修改
vue.config.js文件中的proxy部分
devServer: {
open: true, //配置自動(dòng)啟動(dòng)瀏覽器
// host: '0.0.0.0',
port: 8088,
https: false,
hot: false,
hotOnly: false,
// 設(shè)置代理
proxy: {
'^/Menu/': {
target: 'http://localhost:8052', // 代理到的后端接口地址
ws: true, //如果要代理 websockets，配置這個(gè)參數(shù)
secure: false, // 如果是https接口，需要配置這個(gè)參數(shù)
changeOrigin: true, //是否跨域
// pathRewrite: {
// '/Menu': '/'
// }
}
},
before: app => {}
},可能遇到的問(wèn)題
瀏覽器依然報(bào)錯(cuò)跨域問(wèn)題，代理未能生效
請(qǐng)求地址的配置文件在.env.development中，原來(lái)配置如下：
NODE_ENV = 'development' VUE_APP_CURRENTMODE='dev' //local // 這是后端接口 VUE_APP_API_HOST=http://localhost:8052/Menu
其中VUE_APP_API_HOST為axios請(qǐng)求時(shí)，對(duì)應(yīng)的baseURL地址
// axios.js
// create an axios instance
const service = axios.create({
baseURL: process.env.VUE_APP_API_HOST, // api 的 base_url
timeout: 5000 // request timeout
})此時(shí)啟動(dòng)VUE項(xiàng)目，依然報(bào)錯(cuò)跨域問(wèn)題。因?yàn)榇藭r(shí)請(qǐng)求的地址依然是http://localhost:8052開(kāi)頭，并未牽涉到配置的代理，需要將請(qǐng)求的地址修改為http://localhost:8088，即
NODE_ENV = 'development' VUE_APP_CURRENTMODE='dev' //local // 這是后端接口 VUE_APP_API_HOST=http://localhost:8088/Menu
此時(shí)，代理會(huì)生效，但有可能會(huì)報(bào)錯(cuò)404
pathRewrite可能會(huì)牽涉的路徑問(wèn)題
這里針對(duì)的只是后端接口，瀏覽器中前端的請(qǐng)求與此無(wú)關(guān)，相關(guān)的接口都可以用postman訪(fǎng)問(wèn)測(cè)試。
即，可以用postman測(cè)試http://localhost:8088/Menu/xxxx等一系列接口，因?yàn)関ue已經(jīng)設(shè)置了其代理。
（注：此處前端接口指：vue項(xiàng)目運(yùn)行起來(lái)時(shí)，瀏覽器控制臺(tái)中XHR能看到的接口；
后端接口指經(jīng)過(guò)代理后的（后端）接口，它本身還是后端接口，只是經(jīng)過(guò)了代理，可以用前端的ip和端口通過(guò)postman來(lái)調(diào)用。在某些情況下，前端接口和后端接口會(huì)存在路徑上的偏差造成請(qǐng)求404）
一般來(lái)說(shuō)，pathRewrite的配置如下，作用是修改請(qǐng)求接口的地址（后端接口）
pathRewrite: {
'/Menu': '/'
}
// '^/api': '/api' // 這種接口配置出來(lái) http://localhost:8088/api/login
// '^/api': '/' 這種接口配置出來(lái) http://localhost:8088/login然而這僅僅是理論上的配置，在實(shí)際使用中，我遇到了如下問(wèn)題：
如果在配置中保留'/Menu': '/'，能夠代理成功url會(huì)變成http://localhost:8088/Menu/Menu/xxx
如果去除，能夠代理成功的url為http://localhost:8088/Menu/xxxx
甚至在寫(xiě)成'/Menu': '/Menu'時(shí)，能夠成功代理的url也為http://localhost:8088/Menu/xxx
與理論上的配置相反
不確定是由于版本或者是其他什么問(wèn)題導(dǎo)致的這一奇怪的現(xiàn)象，如果有人遇到此類(lèi)的問(wèn)題，可以考慮修改此處的配置。由于我只需要解決瀏覽器的跨域問(wèn)題，只要保證前端調(diào)用的接口和后端能夠成功代理的接口一致即可。
以上就是Vuecli3配置代理及遇到的問(wèn)題解決的詳細(xì)內(nèi)容，更多關(guān)于Vuecli3配置代理的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了Element Input組件分析小結(jié)，詳細(xì)的介紹了Input組件的使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
使用Vue開(kāi)發(fā)自己的Chrome擴(kuò)展程序過(guò)程詳解
這篇文章主要介紹了使用Vue開(kāi)發(fā)自己的Chrome擴(kuò)展程序過(guò)程詳解，瀏覽器擴(kuò)展程序是可以修改和增強(qiáng) Web 瀏覽器功能的小程序。它們可用于各種任務(wù)，例如阻止廣告，管理密碼，組織標(biāo)簽，改變網(wǎng)頁(yè)的外觀(guān)和行為等等。,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了Vue之vue.$set()方法源碼案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08
100行代碼實(shí)現(xiàn)一個(gè)vue分頁(yè)組功能
今天用vue來(lái)實(shí)現(xiàn)一個(gè)分頁(yè)組件，總體來(lái)說(shuō)，vue實(shí)現(xiàn)比較簡(jiǎn)單，樣式部分模仿了elementUI。接下來(lái)本文通過(guò)實(shí)例代碼給大家介紹100行代碼實(shí)現(xiàn)一個(gè)vue分頁(yè)組功能，感興趣的朋友跟隨小編一起看看吧2018-11-11
在Vue實(shí)例中,data屬性是用戶(hù)定義的用于存儲(chǔ)數(shù)據(jù)的對(duì)象,而_data是Vue內(nèi)部用于存儲(chǔ)數(shù)據(jù)的對(duì)象,本文主要介紹了淺談vue中的data與_data的關(guān)系是什么,感興趣的可以了解一下2023-12-12
遞歸?簡(jiǎn)單來(lái)講就是程序自己調(diào)用自身,vue中的遞歸組件就是,組件自身調(diào)用自身,下面這篇文章主要給大家介紹了關(guān)于Vue3遞歸組件的用法,需要的朋友可以參考下2022-03-03
本文主要介紹了Vue中使用Lodash的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Vue?3引入了Composition?API，這是一套新的API用于編寫(xiě)組件，作為Options?API的替代，這篇文章主要介紹了如何優(yōu)化?Vue.js?應(yīng)用程序,需要的朋友可以參考下2023-02-02
Element?Table行的動(dòng)態(tài)合并及數(shù)據(jù)編輯示例
這篇文章主要為大家介紹了Element?Table行的動(dòng)態(tài)合并及數(shù)據(jù)編輯示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單彈窗效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09