vue中跨域解决办法
项目在上线之后,前后端的代码放在同一个服务器下面,就不存在跨域的问题。然而在前后端分离的开发中,跨域在所难免。在以前,存在跨域的时候一般都叫后台小伙伴设置,但是vue中提供了一种方法,在前端也可以设置解决跨域的问题。下面给大家介绍一下:比如我们服务端的地址为http://localhost:3000;而我们开发的地址为http://localhost:8080;由于端口不一致导致了跨域。解决办..
·
项目在上线之后,前后端的代码放在同一个服务器下面,就不存在跨域的问题。然而在前后端分离的开发中,跨域在所难免。在以前,存在跨域的时候一般都叫后台小伙伴设置,但是vue中提供了一种方法,在前端也可以设置解决跨域的问题。下面给大家介绍一下:
比如我们服务端的地址为http://localhost:3000;而我们开发的地址为http://localhost:8080;由于端口不一致导致了跨域。解决办法:
一、修改config文件夹中index.js文件dev:{。。。}
proxyTable: {
"/api": {
target: "http://loacalhost:3000",
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
二、在main.js中添加HOST
Vue.prototype.HOST = '/api'
然后我们就可以在给后台发送请求时写成:
created(){
var url = this.HOST+'/login';
this.$axios.post(url,{
username: 'gdou',
password: '2015116414xx'
})
.then(res => {
console.log(res.data)
})
.catch(error => {
console.log(error)
})
}
我们修改了配置文件,别忘了重启服务哦~~
更多推荐
已为社区贡献3条内容
所有评论(0)