Vue2.0使用Axios实现跨域访问
- 配置BaseUrl
在main.js中,配置下我们访问的Url前缀:
axios.defaults.baseURL = '/api' // 开发本地代理
axios.defaults.headers.post['Contenst-Type'] = 'application/json;'
axios.defaults.headers.common['token'] = store.state.token
- 配置代理
修改config文件夹下的index.js文件,在proxyTable中加上如下代码:
proxyTable: {
'/api': { //代理地址
target: 'http://xxx.xxx.xxx.xxx:8088', //需要代理的地址, 实际生产环境需要访问的地址
changeOrigin: true, //是否跨域
secure: false,
pathRewrite: {
'^/api': '/' //本身的接口地址没有 '/api' 这种通用前缀,所以要rewrite,如果本身有则去掉
}
}
},
- 修改请求Url
this.$axios.get("/test/test123")
.then(res=>{
console.log(res)
})
.catch(err=>{
console.log(err)
})
给url加上了前缀/api,我们访问"/test/test123"就当于访问了:localhost:8080/api/test/test123