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 相关文章推荐
多个iframe自动调整大小的问题
Sep 18 Javascript
js绑定事件this指向发生改变的问题解决方法
Apr 23 Javascript
jquery slibings选取同级其他元素的实现代码
Nov 15 Javascript
js中匿名函数的创建与调用方法分析
Dec 19 Javascript
jQuery和AngularJS的区别浅析
Jan 29 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
Mar 14 Javascript
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
zTree获取当前节点的下一级子节点数实例
Sep 05 Javascript
Vue.js简易安装和快速入门(第二课)
Oct 17 Javascript
Node.js 使用axios读写influxDB的方法示例
Oct 26 Javascript
JavaScript中数组去重的5种方法
Jul 04 Javascript
Vue单文件组件开发实现过程详解
Jul 30 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加密解密类代码
2011/11/27 PHP
浅析PHP页面局部刷新功能的实现小结
2013/06/21 PHP
PHP上传图片进行等比缩放可增加水印功能
2014/01/13 PHP
PHP遍历并打印指定目录下所有文件实例
2014/02/10 PHP
PHP使用DirectoryIterator显示下拉文件列表的方法
2015/03/13 PHP
php实现指定字符串中查找子字符串的方法
2015/03/17 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
宝塔面板在NGINX环境中TP5.1如何运行?
2021/03/09 PHP
Javascript算符的优先级介绍
2013/03/20 Javascript
js算法中的排序、数组去重详细概述
2013/10/14 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
2016/08/29 Javascript
D3.js实现散点图和气泡图的方法详解
2016/09/21 Javascript
BootstrapValidator不触发校验的实现代码
2016/09/28 Javascript
vue+node+webpack环境搭建教程
2017/11/05 Javascript
vue实现文件上传功能
2018/08/13 Javascript
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
Vue分页效果与购物车功能
2019/12/13 Javascript
浅谈JSON5解决了JSON的两大痛点
2020/12/14 Javascript
微信小程序之高德地图多点路线规划过程示例详解
2021/01/18 Javascript
[01:00:53]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Secret
2018/03/30 DOTA
把大数据数字口语化(python与js)两种实现
2013/02/21 Python
python实现抖音点赞功能
2019/04/07 Python
Python3模拟curl发送post请求操作示例
2019/05/03 Python
python Gunicorn服务器使用方法详解
2019/07/22 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
flask 实现token机制的示例代码
2019/11/07 Python
pytorch 实现tensor与numpy数组转换
2019/12/27 Python
TensorFLow 不同大小图片的TFrecords存取实例
2020/01/20 Python
CSS3实现酷炫的3D旋转透视效果
2019/11/21 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
2018/07/03 HTML / CSS
原生canvas制作画图小工具的踩坑和爬坑
2020/06/09 HTML / CSS
机电一体化专业推荐信
2013/12/03 职场文书
应届毕业生自我评价分享
2013/12/15 职场文书
项目开发计划书
2014/01/09 职场文书
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
vue生命周期钩子函数以及触发时机
2022/04/26 Vue.js