转：基于Vue移动音乐web app跨域获取QQ音乐歌单接口教程
最近看了一个vue移动音乐webapp教程，老师是一个来自滴滴公司的名为黄轶的前端大神，之前学习了他的一个基于vue仿饿了么webapp的初级教程，感觉非常好，十分适合新手，但是那个教程的数据都是前端模拟的一个data.json的json文件，这一次的教程的数据全都是来自QQ音乐的真实数据，需要请求它的接口，因为是线上的数据，所以许多接口需要进行跨域或者设置一些头部信息。
我的vue版本是2.5.2，用vue-cli脚手架工具搭出来的项目结构是：
说一下接口，QQ音乐歌单接口以及参数如下：
其中最需要注意的点是headers里的referer，需要设置成跟QQ音乐的请求参数一样，否则请求该接口服务端不会响应，因为前端是不能够强行修改referer的，所以需要去设置一个后台代理，这是老师的那个vue-cli版本搭出来的项目结构的方法，他的项目结构里有一个dev.server.js。
他在dev.server.js里用express框架搭了一个服务器，设置一个接口，然后让前端去请求这个接口，在这个接口里再去请求QQ音乐的歌单接口并且设置相应的头文件信息如referer等，这样就达到了目的。
由于我的vue-cli搭出来的项目结构跟老师的不一样，没有按照老师的方法去请求，但是在config文件夹下的index.js里提供了一个proxyTable属性，可以在这里进行跨域请求。
在这里配置一个接口名，对应的值是一个对象，target属性是真实请求的值，bypass对应的函数是请求之前可以进行的操作，req这个参数就是请求的信息，可以在这里设置请求头信息，然后通过pathRewrite设置一下前缀，最后在前端请求的接口写成设置的接口名就能进行请求了。
记得把参数的format传成json，这样返回的值就会是json数据了，方便进行操作。
原文地址：https://www.2cto.com/kf/201712/704822.html?utm_source=oschina-app
转：基于Vue移动音乐web app跨域获取QQ音乐歌单接口教程相关推荐
- 基于Vue移动音乐webapp跨域获取QQ音乐歌单接口
最近看了一个vue移动音乐webapp教程,老师是一个来自滴滴公司的名为黄轶的前端大神,之前学习了他的一个基于vue仿饿了么webapp的初级教程,感觉非常好,十分适合新手,但是那个教程的数据都是前端 ...
- vue-music 跨域获取QQ音乐歌单接口
最近在看vue音乐APP视频学习,需要跨域获取歌单数据,视频中老师是在build/dev-server.js文件配置跨域接口的,但是新版的vue-cli是没有这个文件的,我的vue版本是"2 ...
- php获取QQ音乐直链,微信小程序-获取QQ音乐直链
获取QQ音乐直链-用于微信小程序 补充:以下方法获取的直链会有失效期,如果大家有嗅探等工具可以直接上QQ音乐网站获取资源的直链,此方法仅供参考. 问题起源: 最近在做小程序音频播放这一块的时候发现一个 ...
- 基于vue的移动web app页面缓存解决方案
现在移动web app越来越热门了,许多公司开始尝试使用angular.react.vue等MVVM框架来开发单页架构的web app.但在开发web app时,如果希望页面的导航体验也接近原生应用, ...
- 从实例入手学习使用vue+axios配置代理进行跨域访问百度音乐API
场景 如果要使用axios直接进行跨域访问是不可以的,这是就需要配置代理了,为什么要配置代理呢? 原因就是因为客户端请求服务端的数据是存在跨域问题的,而服务器和服务器之间可以相互请求数据,是没有跨域的 ...
- 牛皮！竟然有大佬基于 Spring Boot + Vue 开发了一套网易云amp;QQ音乐（附源码）。。。...
来源:segmentfault.com/a/1190000021376934 # 前言 虽然 B/S 是目前开发的主流,但是 C/S 仍然有很大的市场需求.受限于浏览器的沙盒限制,网页应用无法满足某些 ...
- 基于vue的英语单词App
基于vue的英语单词App 项目介绍 首页界面 学习界面 复习界面 测试界面 设置界面 默认单词界面 下载方式 项目介绍 社会生活的信息化和经济的全球化,使英语的重要性日益突出.英语作为最重要的信息载 ...
- 基于Vue的蔬菜购买APP
基于Vue的蔬菜购买APP 基于Vue的蔬菜购买APP 1.系统功能模块介绍 2.系统基本功能介绍及分析 实现效果 Github链接 基于Vue的蔬菜购买APP 使用Vue脚手架和Vant搭建的H5界 ...
- vue获取qq音乐歌曲音频资源
最近在看一个仿QQ音乐的移动端音乐App,发现获取不到音乐的音频资源,于是打开QQ音乐官网,发现音频的播放地址改变了 在下图audio标签中可查看,地址为 http://ws.stream.qqmus ...
最新文章
- Java 获取当前时间之后的第一个周几，java获取当前日期的下一个周几
- elasticsearch负载均衡节点——客户端节点 node.master: false node.data: false 其他配置和master 数据节点一样...
- 如何用极致业务基础平台做一个通用企业ERP系列之二一览表培训
- PCA原理分析和意义（一）
- java面向对象结课总结_java面向对象课程总结
- 小程序开发(1)-之目录结构和文件说明
- flutter 一个用户登录页面
- 由replaceAll引发的java.util.regex.PatternSyntaxException错误
- 计算机基础知识 音频,计算机基础知识(总结+试题).pdf
- 马化腾说它千年实现李彦宏说新瓶装旧酒，只有马云看好阿里笑了
- 方形物体绕中心旋转的扭力_转轴扭力测试方案
- 将桌面文件映射至E盘
- backtrack常用的一些综合扫描工具实例用法
- python selenium爬虫入门案例day04:Vhiphop街舞视频
- 物价上涨 下馆子点菜的省钱办法
- 塑胶卡扣弹性计算公式_塑胶产品结构设计卡扣
- git：info: detecting host provider for ‘https://gitee.com/‘...
- 浏览器做打假助手，边界在哪里？
- 禅与摩托车维修艺术（2）
- 【我的渲染技术进阶之旅】关于C++轻量级界面开发框架Dear ImGui介绍