vue项目axios解决跨域问题？

前景:vue项目用axios获取数据，前后端分离的项目。肯定会产生跨域问题

解决方法:
第一步:找到config下index.js

第二步:找到proxyTable：{}
//修改里面的代码
proxyTable: {
"/api":{
//1.1网络地址
targe:"http://api.douban.com/v2",
//1.2webpack的属性映射host的结果
changeOrigin：true,
//1.3路径重置
pathRewrite:{//匹配网络地址
"^/api":""
    }
  }
},

在这里插入图片描述

第三步:找到min.js
//1.4路由映射地址,匹配上一级地址
Vue.prototype.HOST="/api";

豆瓣的网址：API的V2接口
在这里插入图片描述
helloworld.vue

//第四步:实战运用
测试地址。helloworld.vue中,
//HOST是全局使用的，
//+"/movie/250"是v2后面的地址，相当于参数地址
created(){//初始后
let url=this.HOST+"/movie/top250"；
//url地址
//在api中api的v2有两个请求参数：start:起始、count:代表返回的数量
this.$axios.get(url,{
params:{//params:传递参数
count:10,//10条数据
start:10,//从0开始
})
.then(res=>{//回调
      this.fliterDate(res.data);
})
.catch(error=>{//捕获错误时
console.log(error);
})
},
//渲染到页面上，如果需要的数据不多，可以用过滤的方法
methods:{//自定义方法()
fliterDate(data){
//用数组储存多条数据
var finalMovies=[];
//循环遍历
for(var i=0;i<data.subjects.length;i++){//data.subjects当前data中的那个属性名
//把需要的数据放到对象中，在post到数据中
var moviesObj={
 title:data.subjects[i].title;//名字
 img:data.subjects[i].images.large;//图片
      }
      //每次末尾添加push
      finalMovies.push(moviesObj)
   }
   //最后获取和给赋值
   this.movies=finalMovies;
 }
}

容易报错的bug点:当修改代码时网页不会整个修改配置，这时候就会报错，需要重新启动服务，接口调取成功返回数据,成功渲染。

第五步:helloworld.vue中
//return中设置初始值:
return{
   movies:[];//初始值
}

第六步:
//在helloworld.vue中
/*---渲染使用----*/
/*---循环遍历出来----*/
<div  v-for="movie in movies">
<p>{
   
   {movie.title}}</p>
<img :src="movie.img" alt="movie.img">
</div>

此方法只是解决测试环境下，打包上线的跨域不能使用这个方法。

vue项目axios解决跨域问题？

猜你喜欢