场景
如果要使用axios直接进行跨域访问是不可以的,这是就需要配置代理了,为什么要配置代理呢?
原因就是因为客户端请求服务端的数据是存在跨域问题的,而服务器和服务器之间可以相互请求数据,是没有跨域的概念(如果服务器没有设置禁止跨域的权限问题),也就是说,我们可以配置一个代理的服务器可以请求另一个服务器中的数据,然后把请求出来的数据返回到我们的代理服务器中,代理服务器再返回数据给我们的客户端,这样我们就可以实现跨域访问数据啦。
效果
实现
以访问百度音乐API为例
本地代理配置
打开config下的index.js
proxyTable: {
"/baidu_music_api": {
target: "http://tingapi.ting.baidu.com",
changeOrigin: true,
pathRewrite: {
'^/baidu_music_api': ''
}
}
},
注:
target:要请求的第三方平接口,这里是百度音乐API :http://tingapi.ting.baidu.com/v1/restserver/ting
changeOrigin: true
在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题。
pathRewrite:路径重写
替换target中的请求地址,即别名。
安装axios
到项目根目录下,打开命令行窗口,输入:
npm install --save axios
然后重启项目
入口文件main.js中引入axios
在项目中找到src下的main.js(入口文件)打开
import Vue from 'vue'
import App from './App'
import router from './router'
import Axios from "axios"
Vue.prototype.$axios = Axios;
Vue.prototype.HOST = "/baidu_music_api"
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
注:
import Axios from "axios" 引入axios
Vue.prototype.$axios = Axios; 在vue中使用axios,即挂载axios
跨域访问请求数据
在要实现访问的页面,假如加载完就要获取数据,在,mounted中:
mounted(){
var url = this.HOST + "/v1/restserver/ting?method=baidu.ting.billboard.billList&type="+ this.type +"&size=6&offset=0";
this.$axios.get(url)
.then(res => {
this.todayRecommend = res.data.song_list
})
.catch(error => {
console.log(error);
})
}
将获取的数据获取存放,然后遍历获取并显示数据
完整vue代码:
<template lang="html">
<div class="mod-albums">
<div class="hd log url">
<h2>{{title}}</h2>
<router-link :to="{ name:'MoreList',params:{musictype:this.type,title:title}}" tag="div">
更多
</router-link>
</div>
<div class="container">
<div class="gallery">
<div class="scroller">
<div class="card url" v-for="(item,index) in todayRecommend" :key="index">
<div class="album">
<img :src="item.pic_big" :alt="item.title">
<div class="name">{{ item.title }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name:"todayRecommend",
data(){
return{
todayRecommend:[]
}
},
props:{
title:{
type:String,
default:"今日榜单"
},
type:{
type:String,
default:"1"
}
},
mounted(){
var url = this.HOST + "/v1/restserver/ting?method=baidu.ting.billboard.billList&type="+ this.type +"&size=6&offset=0";
this.$axios.get(url)
.then(res => {
this.todayRecommend = res.data.song_list
})
.catch(error => {
console.log(error);
})
}
}
</script>
<style scoped>
.mod-albums {
background-color: #fff;
padding: 10px 17px;
}
.hd {
display: flex;
margin: 14px 0 18px 0;
}
.hd h2 {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
margin: 0;
padding: 0;
font-size: 20px;
}
.hd div {
width: 64px;
font-size: 12px;
text-align: right;
}
.mod-albums .gallery {
overflow: hidden;
margin: 0 -5px;
}
.mod-albums .gallery .card {
width: 33.3%;
float: left;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0 5px 10px;
}
.mod-albums .gallery .card .album {
position: relative;
}
.mod-albums .gallery .card img {
width: 100%;
height: auto;
border: 1px solid #eee;
}
.mod-albums .gallery .card .name {
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-top: 4px;
line-height: 14px;
max-height: 28px;
margin-bottom: 2px;
}
</style>