z这里如果我们和之前获取轮播图的数据一样来获取表单的数据  发现根本获取不到

原因是qq音乐在请求头里面加了authority和refer等 但是如果我们通过jsonp实现跨域来请求数据的话  是根本不能够修改请求头的  所以我们就考虑用axios  但是axios又不能进行跨域  那么我们要怎么拿到qq音乐的服务器的数据呢？？其实是有办法解决的：我们可以进行后端接口代理  那么什么是后端代理呢？？

如果要使用axios直接进行跨域访问是不可以的，这是就需要配置代理了，为什么要配置代理呢？

原因就是客户端请求服务端的数据是存在跨域问题的，而服务器和服务器之间可以相互请求数据，是没有跨域的概念（如果服务器没有设置禁止跨域的权限问题），也就是说，我们可以配置一个代理的服务器可以请求另一个服务器中的数据，然后把请求出来的数据返回到我们的代理服务器中，代理服务器再返回数据给我们的客户端，这样我们就可以实现跨域访问数据啦。

如果不理解可以看依据看下图

接下来手动代理后端服务器

在手动代理后端服务器完毕之后就来写前端请求

成功拿到数据

有一点要注意：axios并不是vue的插件  所以我们不能直接使用use方法  所以我们要将他添加到vue的原型链中使用

import axios from 'axios';

Vue.prototype.$http = axios;

这样我们就可以直接使用了，

注意点：1.webpack的跨域解决方法只是是适合在开发环境中使用，

　　　　2.设置inde.js内部的dev时，请注意，需要设置的应该是域名，过多会失效，所以应该是www。baidu。com

　　　　3.使用axios上传文件，不需要像ajax上传图片一样使用formdata

通过这次demo知道了 如果不想让别人直接拿到我网站的数据  可以在请求头加个refer

用Vue来实现音乐播放器（九）：歌单数据接口分析的更多相关文章

  1. vue小练习--音乐播放器

    1 首先建一个文件夹 放几首歌曲 2 看代码 1)基本版本 <!DOCTYPE html> <html lang="zh-CN"> <head> ...

  2. 用Vue来实现音乐播放器（三十八）：歌词滚动列表的问题

    1.频繁切换歌曲时,歌词会跳来跳去 原因: // 歌词跳跃是因为内部有一个currentLyric对像内部有一些功能来完成歌词的跳跃 //每个currentLyric能实现歌曲的播放跳到相应的位置 是 ...

  3. Vue实战：音乐播放器（一） 页面效果

    先看一下效果图 首页 歌单详情页 歌手列表 歌手详情页 排行页面 榜单的详情页(排序样式) 搜索页面 搜索结果 播放器内核 歌词自动滚动 播放列表 用户中心

  4. 用Vue来实现音乐播放器（八）：自动轮播图啊

    slider.vue组件的模板部分 <template> <div class="slider" ref="slider"> <d ...

  5. 用Vue来实现音乐播放器（二十三）：音乐列表

    当我们将音乐列表往上滑的时候   我们上面的歌手图片部分也会变小 当我们将音乐列表向下拉的时候   我们的图片会放大 当我们将音乐列表向上滑的时候   我们的图片有一个高斯模糊的效果 并且随着我们的列 ...

  6. 用Vue来实现音乐播放器（二十一）：歌手详情数据抓取

    第一步:在api文件夹下的singer.js中抛出getSingerDetail方法 第二步:在singer-detail.vue组件中引入api文件夹下的singer.js和config.js 第三 ...

  7. 用Vue来实现音乐播放器（二十）：Vuex初始化及歌手数据的配置

    state:所有组件的所有状态和数据  放入同一个内存空间去管理 我们把它称为state Vue Components:state里面的数据可以方便的映射到组件上 然后渲染组件 Actions:当组件 ...

  8. 用Vue来实现音乐播放器（十八）：右侧快速入口点击高亮

    问题一:当我们点击右侧快速入口的时候  被点击的地方高亮 首先我们要知道右侧快速入口是为什么高亮??因为当watch()监控到scrollY的变化了的时候  将scrollY的值和listHeight ...

  9. 用Vue来实现音乐播放器（十七）：歌手页右侧快速入口实现

    快速入口的列表是其实是之前处理的歌手的数据中的关于title的列表 shorcutList属性是计算属性   通过ret数组中的title计算到的 所以我们要在singer.vue组件中将数据传入到l ...

随机推荐

  1. Redis---Redis与Memcached

    4.Redis与Memcached   两者都是非关系型内存键值,主要有以下不同: 数据类型   Memcached仅支持字符串类型,而Redis支持五种不同的数据类型,可以更灵活地解决问题. 数据持 ...

  2. Redis---使用场景

    3.使用场景 计数器   可以对String进行自增自减运算,从而实现计算器功能.   Redis这种内存型数据库的读写性能非常高,很适合存储频繁读写的及数量 缓存   将热点数据放到内存中,设置内存 ...

  3. 计算机系统结构总结_Scoreboard and Tomasulo

    Textbook:<计算机组成与设计——硬件/软件接口>  HI<计算机体系结构——量化研究方法>          QR 超标量 前面讲过超标量的概念.超标量的目的就是实现指 ...

  4. 剑指offer-二叉搜索树的第k个结点树-python

    二叉查找树(Binary Search Tree),(又:二叉搜索树,二叉排序树)它或者是一棵空树,或者是具有下列性质的二叉树: 若它的左子树不空,则左子树上所有结点的值均小于它的根结点的值: 若它的 ...

  5. 神经网络之：S型神经元

    1.S 型神经元和感知器类似,但是被修改为权重和偏置的微小改动只引起输出的微小变化 2.S型神经元结构: S型函数: 带有x1,x2,........,权重w1,w2.....,和偏置b的S型神经元的 ...

  6. SSM获取前台参数的方式

    1.直接把表单的参数写在Controller相应的方法的形参中,适用于get方式提交,不适用于post方式提交.若"Content-Type"="application/ ...

  7. Maven下载清除jar包

    maven jar包下载命令行方式 在STS中下载JAR包时经常卡住无法继续下载,这时可以用命令行方式进行下载.在终端中今入到该项目的根目录下,然后mvn clean;mvn install;等待下载 ...

  8. 卷积神经网络基础（CNN）【转载】

    作者: Sanjay Chan [ http://blog.csdn.net/chenzomi ] 背景 之前在网上搜索了好多好多关于CNN的文章,由于网络上的文章很多断章取义或者描述不清晰,看了很多 ...

  9. linux c 的main 函数中的return 和 查看返回参数 argv 与 argc 作用

    hello.c #include <stdio.h> int main(int argv, char* argc[]) { printf("hello word!\n" ...

  10. jenkins git项目clean before checkout 和 wipe out repository & force clone

    clean before checkout:会先执行一遍git clone,删除一些untracked文件和目录,比如删除上一次打包编译产生的文件 wipe out repository & ...