vue中使用axios技术解决前端跨域问题
需求:
表面上前端发送请求:http://localhost:8081/api/user
实际上应该访问Linux系统的接口:http://虚拟机IP:端口/api/user
方法:
步骤1:在config文件中index.js添加如下代码
// 进行跨域处理
proxyTable: {
'/api': {
target: 'http://192.168.233.128:80',//设置你调用的接口域名和端口号
changeOrigin: true, //跨域
pathRewrite: {
'^/api': '/' //这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://10.1.5.11:8080/xxx/duty?time=2017-07-07 14:57:22',直接写‘/api/xxx/duty?time=2017-07-07 14:57:22’即可
}
}
},
步骤二:在config文件中的dev.env.js添加如下代码,设置开发环境的API_HOST。
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_HOST: "/api/"
})
步骤三:在main.js中添加以下代码,默认为请求路径的首路径
axios.defaults.baseURL = '/api';//每次发送一个请求都会带一个/api的前缀
步骤四:发送以下post请求
//这里是post请求
this.$http({
method: "post",
url: "/user",
data: {
name: "xiaoming",
info: "12",
},
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
最后:记得重新启动项目,cnpm run dev