最近在学习慕客网上vue仿原生音乐app的项目,在抓取qq音乐歌曲线上地址的时候有些问题,视频里面的地址那时候可以用,但是现在已经不行了,去官网找一下很容易发现现在再想访问这个线上地址关键需要一个vkey,这个vkey又要通过另一个请求获得,这篇文章就主要记录我解决这个问题的过程。
思路就是,通过后端代理,在前端向后端发送一个请求,再由后端发送一个http请求,修改referer和host,避免CORB的问题。
CORB问题可以参考这里
https://segmentfault.com/a/1190000016126079
首先我们去qq音乐打开官网,点开一首歌查看network,media里面似乎只有一个连接可以用
http://113.106.207.152/amobile.music.tc.qq.com/C400004DXFlC0nsTCZ.m4a?guid=4404667995&vkey=CCD72A3A38FAD849BCF764A2AD873D1B5121E472C33174831E1682FB7379290319DFFD8C808426AB89E08B7201ACE5B88FE629B3B24B0DD7&uin=4146&fromtag=66
简单分析一下,文件名(songmid),guid, vkey, uin, fromtag
文件名不出意外你应该是知道的,这个在别的地方抓取,guid,uin, fromtag是固定参数
vkey是变化的,在前面的请求可以找到
关键就是得到这个,其实有这个之后直接获取purl就可以
看一下headers
这个跟以前碰到的不一样,有个query里面有个对象
所以要先转为字符串
callback 和 jsonpcallback不传
然后如果就这样发送一个jsonp的话,控制台会报CORB错误,获取不到数据,所以这里要做一层后端代理
前端代码
export function getMusic(songmid) {
const url = '/api/getMusic';
const oData = {
req_0: {
module: 'vkey.GetVkeyServer',
method: 'CgiGetVkey',
param: {
guid: '4404667995',
songmid: [songmid],
songtype: [0],
uin: '1666707506',
loginflag: 1,
platform: '20',
},
},
comm: {
uin: 1666707506,
format: 'json',
ct: '20',
cv: 0,
},
};
const data = {
g_tk: 1294813765,
loginUin: 1666707506,
hostUin: 0,
format: 'jsonp',
inCharset: 'utf8',
outCharset: 'utf-8',
platform: 'yqq',
notice: 0,
needNewCode: 0,
data: JSON.stringify(oData),
};
return axios.get(url, {
params: data,
}).then(res => Promise.resolve(res.data));
}
后端
app.get('/api/getMusic', function(req, res) {
const url = 'https://u.y.qq.com/cgi-bin/musicu.fcg';
axios.get(url, {
headers: {
referer: 'https://u.y.qq.com',
host: 'u.y.qq.com'
},
params: req.query
}).then((response) => {
res.json(response.data);
}).catch((e) => {
console.log(e);
})
});
这个时候就可以顺利的拿到 purl 了~
其他的建议参考
http://www.mamicode.com/info-detail-2123688.html