Axios实战：音乐播放器项目-跨域配置

跨域配置

如果希望实时动态地获取百度音乐中的歌曲列表，则需要使用Axios跨域请求百度音乐接口中的歌曲列表。百度音乐接口API：https://www.jianshu.com/p/e9d43d15f6ba。跨域请求的配置代码如下：

接着把网络基本URL挂载到main.js中，并且配置拦截器，代码如下：

接着修改MusicList.vue组件，使其能动态获取百度音乐接口中歌曲列表数据，代码如下：

musiclistUrl跨域请求百度音乐数据，type代表音乐类型，size代表获取歌曲数目。上述代码中type的值是固定不变的，我们也可以动态地获取对应类型的歌曲列表，代码如下：

音乐列表导航栏

通过手动传参更换音乐类型从而获取对应的歌曲列表，为了提高用户体验需要设置导航栏进行操作。在pages下新建MusicNav.vue导航栏组件，代码如下：

歌曲列表MusicList.vue组件替换为新建的导航栏组件，代码如下：

创建导航栏下的3个子页面，即热歌榜（HotMusic.vue）、新歌榜（NewMusic.vue）、King榜（KingMusic.vue），代码如下：

最后进行路由配置，代码如下：