vue-music 跨域获取QQ音乐歌单接口
最近在看vue音乐APP视频学习,需要跨域获取歌单数据,视频中老师是在build/dev-server.js文件配置跨域接口的,但是新版的vue-cli是没有这个文件的,我的vue版本是"2.5.2",
网上参考了反向代理的方法实现了跨域,觉得很有用,分享一下:
歌单url: https://y.qq.com/portal/playlist.html
旧版本目录结构如下
相关配置文件如下:
var axios = require('axios')var port = process.env.PORT || config.dev.port var autoOpenBrowser = !!config.dev.autoOpenBrowser var proxyTable = config.dev.proxyTablevar app = express() var apiRoutes = express.Router() apiRoutes.get('/getDiscList', function (req, res) {var url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg'axios.get(url, {headers: {referer: 'https://c.y.qq.com/',host: 'c.y.qq.com'},params: req.query}).then((response) => {res.json(response.data)}).catch((e) => {console.log(e)}) })app.use('/api', apiRoutes)
然而: 现在目录结构改变后,原来的方法已经不能使用,找到一个好的解决方法:
使用ProxyTable反向代理:在这个index.js文件里面找到ProxyTable配置
index.js 配置如下:
proxyTable: {'/api/getDiscList': {target: 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg',bypass: function (req, res, proxyOptions) {req.headers.referer = 'https://c.y.qq.com';req.headers.host = 'c.y.qq.com';},pathRewrite: {'^/api/getDiscList': ''}}},//注意上面的写法
回到文件: api/recommendj.s
具体代码如下:
import jsonp from '../common/js/jsonp' import {commonParams, options} from './config' import axios from 'axios'export function getRecommend() {const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'const data = Object.assign({}, commonParams, {uin: 0,platform: 'h5',needNewCode: 1})return jsonp(url, data, options) }// ajax请求,不是jsonp请求了 export function getDiscList() {const url = '/api/getDiscList'const data = Object.assign({}, commonParams, {platform: 'yqq',hostUin: 0,sin: 0,ein: 29,sortId: 5,needNewCode: 0,categoryId: 10000000,rnd: Math.random(),format: 'json'})return axios.get(url, {params: data}).then((res) => {return Promise.resolve(res.data)}) }
这样就可以实现,结果如下:
也能拿到列表数据了:
json和jsonp的区别:
json是一种格式,jsonp是一种请求跨域资源的方式。
跨域:是指浏览器不能执行其他网站的脚本,它是由浏览器的同源策略造成的,是浏览器施加的安全限制。在跨域情况下,XMLHTTPRequest是不能发送异步请求的。
所谓同源是指域名、协议、端口均相同。
那么,同是跨域方法,为什么轮播图的请求可以用jsonp的方式,而歌单的请求要使用反向代理,两个都是跨域方法。
比较两个请求jsonp和proxyTable反向代理的异同:
jsonp原理:<script>标签里的src是没有跨域限制的,<img>标签里的src也是没有限制的,我们书写网页的过程中不难发现这一点。jsonp就是通过在本站脚本创建一个<script>便签,将地址指向第三方的API地址来达到第三方通讯的目的,并提供一个回调函数来接收数据,第三方响应为json数据的包装,这个是jsonp名字的由来(json padding)
jsonp的局限性:只支持GET方式的HTTP请求,不能解决不同域的两个页面之间如何进行JavaScript调用的问题
反向代理:本方法是在自己的浏览器创建一个服务器,然后让自己的服务器去请求目标服务器。而且跨域是针对JavaScript来说的,JavaScript 是插入HTML页面后在浏览器上执行的脚本。服务器之间是可以随便请求数据而不受限制的。我们通过自己创建的服务器去请求目标服务器,然后在从我们客户端去请求我们自己创建的服务器,这就不存在跨域了。
参考文章:https://segmentfault.com/a/1190000013073545
感谢作者分享
转载于:https://www.cnblogs.com/shengnan-2017/p/9104079.html
vue-music 跨域获取QQ音乐歌单接口相关推荐
- 基于Vue移动音乐webapp跨域获取QQ音乐歌单接口
最近看了一个vue移动音乐webapp教程,老师是一个来自滴滴公司的名为黄轶的前端大神,之前学习了他的一个基于vue仿饿了么webapp的初级教程,感觉非常好,十分适合新手,但是那个教程的数据都是前端 ...
- 转:基于Vue移动音乐web app跨域获取QQ音乐歌单接口教程
最近看了一个vue移动音乐webapp教程,老师是一个来自滴滴公司的名为黄轶的前端大神,之前学习了他的一个基于vue仿饿了么webapp的初级教程,感觉非常好,十分适合新手,但是那个教程的数据都是前端 ...
- vue 项目获取QQ音乐歌单数据
1. 前端请求(recommend.js): import axios from 'axios'export function getDiscList() {const url = '/api/ge ...
- 教你如何用Python抓取QQ音乐歌单及分析
学了python也有一段时间了,对于爬虫,后端的框架也有一些了解,但是都是在学习的时候跟着别人写的,感觉都不是自己的知识一样.我去年就给网易云音乐提了一个建议,就是通过播放量或者一个受欢迎程度来排序, ...
- Python抓取QQ音乐歌单并分析
学了python也有一段时间了,对于爬虫,后端的框架也有一些了解,但是都是在学习的时候跟着别人写的,感觉都不是自己的知识一样.我去年就给网易云音乐提了一个建议,就是通过播放量或者一个受欢迎程度来排序, ...
- python爬虫基础Ⅱ——Ajax数据爬取、带参请求:QQ音乐歌单、QQ音乐评论
文章目录 基础爬虫部分Ⅱ Ajax技术 json 1. Network 2. XHR怎么请求? 3. 什么是json? 4. json数据如何解析? 带参数请求 1. 复习 2. params 3. ...
- python爬取音乐并保存的格式_python爬取QQ音乐歌单歌曲保存到本地,json解析
序:python强大的功能,可以爬取网上的某些信息,本次主要是通过爬歌单信息熟悉下python基础. 用到知识点: 1.python3.urllib.request.openurl 2.json (j ...
- python爬取音乐并保存_python爬取QQ音乐歌单歌曲保存到本地,json解析
序:python强大的功能,可以爬取网上的某些信息,本次主要是通过爬歌单信息熟悉下python基础. 用到知识点: 1.python3.urllib.request.openurl 2.json (j ...
- vue.js最新版获取QQ音乐播放源
最近在学习使用vue写一个播放器,一直获取不到正确的播放源,QQ对这块限制更加严格了.按照之前的写法,现在已经不能获取到播放源了. 首先,要去抓取QQ音乐的播放源 1.首先在QQ音乐任意播放页面 2. ...
最新文章
- [导入]WindowsXp的两个问题:
- 周鸿祎:在用户需求中找到真正的创新(强烈推荐)
- java中path和classpath_java中的环境变量path和classpath的作用-Go语言中文社区
- c++ map初始化同时赋值_Golang学习笔记五--map
- 比较TFS与SVN,你必须知道的10点区别
- java stringbuffer数组_Java中字符数组、String类、StringBuffer三者之间相互转换
- 差分信号_形象解读差分信号,它比单端信号强在哪?
- vue js 反编译_学会了Vue,前端面试却没找到工作?
- 从零开始开发JVM语言(七)语义分析的起步
- 微软Windows7对Vista的几点改进
- bigemap软件功能对比
- BIM族库下载——BIM项目停车场管理系统常用族库
- python 找色点击_[原创]python实现触动精灵引擎找色找字函数,为机器学习添加手脚...
- Linux部署启动服务脚本
- Microsoft兼容性遥测是什么?Microsoft兼容性遥测占用高磁盘
- 安卓手机上有适合学生的日程app?
- 微信小程序加签验签(wxapp_rsa,jsencrypt)和egg搭建的后端交互(jsrsasign,node_rsa)最全!!!
- 多核CPU 跟 进程/线程
- 华为路由交换课程笔记10-GARP和GVRP
- 王者荣耀android看不见iOS,王者荣耀转区功能来了!iOS和安卓这个限制,终于消失了...