配置方法

內(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開頭，并未牽涉到配置的代理，需要將請(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訪問(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

甚至在寫成'/Menu': '/Menu'時(shí)，能夠成功代理的url也為http://localhost:8088/Menu/xxx

與理論上的配置相反

不確定是由于版本或者是其他什么問(wèn)題導(dǎo)致的這一奇怪的現(xiàn)象，如果有人遇到此類的問(wèn)題，可以考慮修改此處的配置。由于我只需要解決瀏覽器的跨域問(wèn)題，只要保證前端調(diào)用的接口和后端能夠成功代理的接口一致即可。

以上就是Vuecli3配置代理及遇到的問(wèn)題解決的詳細(xì)內(nèi)容，更多關(guān)于Vuecli3配置代理的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論