移动端qq音乐地址:https://m.y.qq.com/ .抓取QQ音乐数据
请求首页时,有如下链接,回调了jsonp
https://c.y.qq.com/splcloud/fcgi-bin/p.fcg?g_tk=1847183166&format=jsonp&jsonpCallback=jsonp1
真正xhr:
https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg?g_tk=1847183166&uin=1163898403&format=json&inCharset=utf-8&outCharset=utf-8¬ice=0&platform=h5&needNewCode=1&_=1536239792110
浏览器可以打开的json数据
在记忆一下jsonp
jsonp是目前可以跨域的(基本上标签带有src属性的都是可以不受任何访问限制),且要动态生成script标签在ajax无法跨域的情况下可以使用jsonp进行请求
但它跟ajax是不一样的..jsonp利用url链接进行请求发送和调用回调函数(callblack)使用数据。
使用了 github:https://github.com/webmodules/jsonp 的插件,自定义一个封装的jsonp
import originJsonp from 'jsonp' export default function jsonp(url, data, option) { url += (url.indexOf('?') < 0 ? '?' : '&') + param(data) return new Promise((resolve, reject) => { originJsonp(url, option, (err, data) => { if (!err) { resolve(data) } else { reject(err) } }) }) } //url代表一个纯净的url地址 //data是其他参数,用于拼接到url上 export function param(data) { let url = '' for (var k in data) { let value = data[k] !== undefined ? data[k] : '' url += `&${k}=${encodeURIComponent(value)}` //es6语法 } return url ? url.substring(1) : '' }
对每个组件封装请求
import jsonp from 'common/js/jsonp' import {commonParams, options} from './config' export function getRecommend() { const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg' const data = Object.assign({}, commonParams, { platform: 'h5', uin: 0, needNewCode: 1 }) return jsonp(url, data, options) }
这个url是真正xhr的地址