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. Python 入门之常用运算符

    Python 入门之常用运算符 Python中的运算按种类可分为算数运算.比较运算.逻辑运算.赋值运算.成员运算.身份运算.位运算 1.常用运算符: (1)算数运算符: + - * / %(取余(模) ...

  2. 使用electron实现百度网盘悬浮窗口功能!

    相关依赖 里面使用了vuex vue vue-route storeJs storeJs 用来持久化vuex状态 展示 介绍说明 没有使用electron内置的-webkit-app-region: ...

  3. 多线程测试工具groboutils的使用

    一直使用junit做为服务测试框架,感觉不错.最近有人反映在高并发的情况下,存在服务调不到.无奈再次打开单元测试模拟高并发的 情况,却发现junit不支持并发测试      引入groboutils ...

  4. maven的概念模型

    maven包含了一个项目对象模型(project object model),一组标准集合,一个项目生命周期(project lifecycle),一个依赖管理系统(dependency manage ...

  5. http参数传递方式

    url传参 这种在各种method(get,post,delete,put)都能使用,解析速度快 body体中的参数 application/x-www-form-urlencoded 这应该是最常见 ...

  6. Solr知识点摘录

    1.Solr和Lucene区别: 2.Solr的下载与安装 3. 4. 5. 6.Solr基础 7. 8.Solr索引操作 9. 10.

  7. nmbd - 向客户端提供构造在IP之上的NetBIOS名字服务的NetBIOS名字服务器

    总览 SYNOPSIS nmbd [-D] [-F] [-S] [-a] [-i] [-o] [-h] [-V][-d <debug level>] [-H <lmhosts fil ...

  8. uwsgi支持http长链接

    http1.1支持长链接,而http1.0不支持,所以,在切换http版本号或者升级服务端版本时候,尤其要注意这个造成的影响. 当客户端以http1.1长链接方式连接服务端时,服务端如果不支持1.1, ...

  9. linux tomcat 中文文件上传乱码

    找到tomcat文件夹下的conf/server.xml,在connector节点下新增URIEncoding="utf-8"参数 <Connector connection ...

  10. 洛谷 P4665 [BalticOI 2015]Network

    洛谷 P4665 [BalticOI 2015]Network 你有一棵 $ n $ 个节点的树,你可以在树上加一些边,使这棵树变成一张无重边.自环的图,且删掉任意一条边它仍然联通.求最少要加多少条边 ...