在前端开发过程中会遇到跨域问题,在vue中以axios的方式来处理跨域,我们用到的是webpack修改配置文件的方式。主要实在proxyTable这个对象中做一些相关的配置。
1.修改config文件夹下面的index.js文件,在dev的大括号里面添加如下代码
proxyTable: {
//自己起个名字 到时候在axios里面引入这个名字 这个名字就代表下面的那个路径/mock/vuetesterver/
'/testUrl': {
target: "http://mock.test.cn", //跨域服务器的域名
changeOrigin: true,
pathRewrite: {
'^/testUrl': '/mock/vuetestserver/' //跨域服务器地址的路径部分,可以不写最后一个路径部分,到时候axios动态拼接最后路径
}
},
},
2:在项目中axios请求代码如下
this.$axios({
//testUrl 就表示 index.js 文件中声明代表的那个路径,再动态拼接最后一个,实际的server路径就可以了
url:"/testUrl/myserver.test"
}).then(res=>{
console.log(res.data);
})
.catch(err=>{
})
3:最终跨域服务器的真实路径
http://mock.test.cn/mock/vuetestserver/myserver.test
4.跨域配置成功