axios代理跨域 cli4_vuecli 3.0之跨域请求代理配置及axios路径配置 莫小龙
vue-cli 3.0之跨域請(qǐng)求代理配置及axios路徑配置
問題：在前后端分離的跨域請(qǐng)求中，報(bào)跨域問題
配置：
vue.config.js：
module.exports = {
runtimeCompiler: true,
publicPath: '/', // 設(shè)置打包文件相對(duì)路徑
devServer: {
// open: process.platform === 'darwin',
// host: 'localhost',
port: 8071,
// open: true, //配置自動(dòng)啟動(dòng)瀏覽器
proxy: {
'/api': {
target: 'http://127.0.0.1:8100/', //對(duì)應(yīng)自己的接口
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': ''
}
}
}
},
}
配置后需要重啟服務(wù)。
配置axios的baseUrl。
main.js：
axios.defaults.timeout = 5000 // 請(qǐng)求超時(shí)
axios.defaults.baseURL = '/api/' // api 即上面 vue.config.js 中配置的地址
發(fā)送請(qǐng)求：
axios.post('/postData/', {
name: 'cedric',
}).then((res) => {
console.log(res.data)
})
此時(shí)，雖然請(qǐng)求發(fā)送到了：http://localhost:8080/api/postData/,但是已經(jīng)代理到了地址：http：//127.0.0.1.8100/postData/.控制臺(tái)顯示請(qǐng)求的地址為：http://localhost:8080/api/postData/。
生產(chǎn)環(huán)境：
只需要將 main.js 中 axios 作如下修改：
axios.defaults.timeout = 5000 // 請(qǐng)求超時(shí)
axios.defaults.baseURL = 'http://api.demourl.com/'
頁(yè)面中axios的請(qǐng)求保持不變：
axios.post('/postData/', {
name: 'cedric',
}).then((res) => {
console.log(res.data)
})
轉(zhuǎn)載自：https://www.cnblogs.com/cckui/p/10331432.html
總結(jié)
以上是生活随笔為你收集整理的axios代理跨域 cli4_vuecli 3.0之跨域请求代理配置及axios路径配置 莫小龙的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： win7cf全屏怎么调 Windows
- 下一篇： oracle如何设置权限,ORACLE的