之前的代碼,是在這里加的
截屏2023-03-12 下午7.21.09.png
但是白屏
因?yàn)関ue是運(yùn)行在8080端口,服務(wù)器端在8888端口,就猜想會不會是跨域
用了以下方法
解決Vue跨域訪問后端API問題
例子:
// vue.config.js
module.exports = {
devServer: {
proxy: {
// 當(dāng)你vue請求路徑中包含/api,那么vue會自動幫你代理請求到你的后端地址
// 比如我vue請求的是 '/api/user/getUser',那么會幫我代理請求到后端地址
'/api': {
// 后端地址
target: "http://localhost:8081",
/**
官方文檔的意思:將主機(jī)頭的來源更改為目標(biāo) URL
簡單理解就是需不需要代理
**/
changeOrigin: true,
/**
重寫目標(biāo)地址,比如我vue請求的是/api/user/getUser
經(jīng)歷過重寫之后,我們請求的地址是http://localhost:8081/user/getUser
這里用的是正則表達(dá)式,^符號是用來限制開頭
意思就是匹配vue請求的開頭是否為/api,是的話就進(jìn)行重寫替換
**/
pathRewrite: {
["^/api"]: ""
}
}
}
}
}
在本項(xiàng)目中修改為:
proxyTable: {
'/': {
target: 'http://localhost:8888/xxx_admin/',
changeOrigin: true,
pathRewrite: {
'^/': ''
}
}
},
截屏2023-03-12 下午7.21.09.png
成功