vue + webpack如何绕过QQ音乐接口对host的验证详解


Posted in Javascript onJuly 01, 2018

前言

最近在使用vue2.5+webpack3.6撸一个移动端音乐项目, 获取全部歌单json数据时遇到了接口对host和referer的限制 ,故不能直接在前端使用jsonp对接口数据的读取。 

一、 先实现使用jsonp读取的方式安装jsonp模块并, 封装请求方法

1. $ npm install -S jsonp

2. 封装import originJSONP from 'jsonp'

function jsonp(url, data, options) {
 // 如果存在?则直接加params(data), 否则先加?再加 params(data)
 url += (url.indexOf('?') < 0 ? '?' : '') + params(data)
 // 结果返回一个Promise对象
 return new Promise((resolve, reject) => {
 originJSONP(url, options, (err, data) => {
  if (!err) {
  resolve(data)
  } else {
  reject(err)
  }
 })
 })
}

function params(data) {
 let params = ''
 for (var k in data) {
 let value = data[k] != undefined ? data[k] : ''
 // url += '&' + k + '=' + encodeURIComponent(value) ES5
 params += `&${k}=${encodeURIComponent(value)}` // ES6
 }
 // 去掉首个参数的&, 因为jsonp方法中参数自带&
 return params ? params.substring(1) : ''
}

3. 请求数据

vue + webpack如何绕过QQ音乐接口对host的验证详解

# 代码
 const commonParams = {
 g_tk: 5381,
 inCharset: 'utf-8',
 outCharset: 'utf-8',
 notice: 0,
 format: 'jsonp'
}
const options = {
 param: 'jsonpCallback'
}

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)
}

4. 组件内调用getRecommend()方法, 获取数据

methods: {
 _getRecommend() {
 getRecommend().then((res) => {
  // ERR_OK = 0是自定义的语义化参数, 对应返回json对象的code
  if (res.code === ERR_OK) {
  console.log(res.data)
  const data = res.data
  this.slider = data.slider
  }
 })
 }
},
created() {
 this._getRecommend()
}

console.log(res.data)可打印出json数据

vue + webpack如何绕过QQ音乐接口对host的验证详解

以上是使用jsonp的方式请求数据, 但对于被host和referer限制的json, 需要绕过host验证,先让服务端请求接口,前端页面再通过服务端请求数据。而不能像jsonp那样直接前端请求json对象。报错如下

vue + webpack如何绕过QQ音乐接口对host的验证详解

二、后端axios(ajax)请求接口数据

1.  定义后端代理请求 build/webpack.dev.config.js

const axios = require('axios')
devServer: {
 before(app) {
 app.get('/api/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)
  })
 })
 },
 # ...其他原来的代码
}

2.  前端请求后端已获取的远程数据

import axios from 'axios'function getDiscList() {
 // const url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg'
 const url = '/api/getDiscList'
 const data = Object.assign({}, commonParams, {
 // 以下参数自行参考源json文件的Query String Parameters
 platform: 'yqq',
 uin: 0,
 needNewCode: 0,
 hostUin: 0,
 sin: 0,
 ein: 29,
 sortId: 5,
 rnd: Math.random(),
 categoryId: 10000000,
 format: 'json'
 })
 return axios.get(url, {
 params: data
 }).then((res) => {
 return Promise.resolve(res.data)
 })
}

vue + webpack如何绕过QQ音乐接口对host的验证详解

3. 组件内调用getDiscList()方法, 可输出json数据

methods: {
 _getRecommend() {
 getRecommend().then((res) => {
  if (res.code === ERR_OK) {
  // console.log(res.data)
  const data = res.data
  this.slider = data.slider
  }
 })
 },
 _getDiscList() {
 getDiscList().then((res) => {
  console.log(res.data)
 })
 }
},
created() {
 this._getRecommend()
 this._getDiscList()
}

总结, vue+webpack项目中,如需请求获取远程json数据时, 一般由两种情况:

1. 未受host和referer限制的前端组件可以直接使用jsonp插件请求json对象

2. 受host和referer限制需要验证的, 通过后端代理方式,使用axios请求, 前端再请求后端json对象

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
Apr 01 Javascript
ExtJS 2.0实用简明教程 之Ext类库简介
Apr 29 Javascript
jQuery UI AutoComplete 自动完成使用小记
Aug 21 Javascript
js点击事件链接的问题解决
Apr 25 Javascript
JavaScript中的标签语句用法分析
Feb 10 Javascript
JavaScript定时显示广告代码分享
Mar 02 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
Aug 28 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
Oct 29 Javascript
AngularJS实时获取并显示密码的方法
Feb 06 Javascript
vue 中引用gojs绘制E-R图的方法示例
Aug 24 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
Jun 08 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
Oct 28 Javascript
关于Vue组件库开发详析
Jul 01 #Javascript
D3.js实现拓扑图的示例代码
Jun 30 #Javascript
详解angular如何调用HTML字符串的方法
Jun 30 #Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
Jun 30 #Javascript
基于webpack4搭建的react项目框架的方法
Jun 30 #Javascript
AngularJs分页插件使用详解
Jun 30 #Javascript
ionic grid(栅格)九宫格制作详解
Jun 30 #Javascript
You might like
php 获取完整url地址
2008/12/20 PHP
fleaphp rolesNameField bug解决方法
2011/04/23 PHP
PHP header()函数使用详细(301、404等错误设置)
2013/04/17 PHP
PHP结合Jquery和ajax实现瀑布流特效
2016/01/07 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
jQuery select操作控制方法小结
2010/05/26 Javascript
理解Javascript_13_执行模型详解
2010/10/20 Javascript
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
2013/12/30 Javascript
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
javascript中Date()函数在各浏览器中的显示效果
2015/06/18 Javascript
JavaScript调用浏览器打印功能实例分析
2015/07/17 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
vue增加强缓存和版本号的实现方法
2019/05/01 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
JavaScript实现电灯开关小案例
2020/03/30 Javascript
浅谈js中的attributes和Attribute的用法与区别
2020/07/16 Javascript
[50:58]2018DOTA2亚洲邀请赛3月29日 小组赛A组OpTic VS Newbee
2018/03/30 DOTA
[48:24]完美世界DOTA2联赛循环赛LBZS vs Forest 第一场 10月30日
2020/10/31 DOTA
tensorflow1.0学习之模型的保存与恢复(Saver)
2018/04/23 Python
python进行文件对比的方法
2018/12/24 Python
python 三元运算符使用解析
2019/09/16 Python
Python线程障碍对象Barrier原理详解
2019/12/02 Python
如何使用Python发送HTML格式的邮件
2020/02/11 Python
python如何输出反斜杠
2020/06/18 Python
一款纯css3实现的竖形二级导航的实例教程
2014/12/11 HTML / CSS
成龙洗发水广告词
2014/03/14 职场文书
欢度春节标语
2014/07/01 职场文书
新闻学专业职业生涯规划范文:我的人生我做主
2014/09/12 职场文书
转让协议书范本
2014/09/13 职场文书
教师查摆问题及整改措施
2014/10/11 职场文书
远程教育学习心得体会
2016/01/23 职场文书
2016年读书月活动总结范文
2016/04/06 职场文书
导游词之桂林山水
2019/09/20 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书