webpack代理设置,解决开发过程中的跨域问题
2018-05-06 本文已影响0人
晚上吃火锅吗
前后端分离开发过程中,前端需要连接后台的接口。
比如接口发布在127.0.0.1:5000,我们在前端直接get、post就会出现跨域问题。
webpack很好的解决了这个问题,只需要在webpack工程文件中找到
config\index.js
找到这一段代码
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
...
}
在proxyTable中添加
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api/*':{
target:'http://127.0.0.1:5000/',
changeOrigin:true,
}
},
...
}
这样一来,我们一切api/xxx的请求,就会自动被代理成http://127.0.0.1:5000/api/xxx
比如
this.$http({
method:'GET',
url:'/api/getShop',
}).then(function(response){
console.log(response)
})
实际会访问http://127.0.0.1:5000/api/getShop
跨域问题解决