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 相关文章推荐
jquery checkbox全选、取消全选实现代码
Mar 05 Javascript
jQuery实现简单的间隔向上滚动效果
Mar 09 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
Aug 05 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
Nov 17 Javascript
JS原型对象的创建方法详解
Jun 16 Javascript
js中使用使用原型(prototype)定义方法的好处详解
Jul 04 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
Apr 20 Javascript
angular中实现控制器之间传递参数的方式
Apr 24 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
Nov 15 Javascript
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
webpack实现一个行内样式px转vw的loader示例
Sep 13 Javascript
JS中封装axios来管控api的2种方式
Sep 11 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
C#静态方法与非静态方法实例分析
2014/09/22 PHP
Yii实现自动加载类地图的方法
2015/04/01 PHP
php 在线导入mysql大数据程序
2015/06/11 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
PHP中Static(静态)关键字功能与用法实例分析
2019/04/05 PHP
window.onload 加载完毕的问题及解决方案(下)
2009/07/09 Javascript
jquery tablesorter.js 支持中文表格排序改进
2009/12/09 Javascript
jQuery中多个元素的Hover事件解决方案
2014/06/12 Javascript
jQuery中append()方法用法实例
2015/01/08 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
jQuery实现弹幕效果
2017/02/17 Javascript
nodejs+websocket实时聊天系统改进版
2017/05/18 NodeJs
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
2017/08/01 jQuery
全面介绍vue 全家桶和项目实例
2017/12/27 Javascript
通过jQuery学习js类型判断的技巧
2019/05/27 jQuery
javascript实现简易的计算器
2020/01/17 Javascript
[53:10]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs VG 第一场
2018/04/11 DOTA
python的几种开发工具介绍
2007/03/07 Python
python实现爬虫统计学校BBS男女比例之数据处理(三)
2015/12/31 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
打包python 加icon 去掉cmd黑窗口方法
2019/06/24 Python
django基于restframework的CBV封装详解
2019/08/08 Python
使用python从三个角度解决josephus问题的方法
2020/03/27 Python
Python 捕获代码中所有异常的方法
2020/08/03 Python
PyTorch 导数应用的使用教程
2020/08/31 Python
python实现暗通道去雾算法的示例
2020/09/27 Python
python性能测试工具locust的使用
2020/12/28 Python
ProBikeKit英国:在线公路自行车之家
2017/02/10 全球购物
Fanatics英国官网:美国体育电商
2018/11/06 全球购物
波兰快递服务:Globkurier.pl
2019/11/08 全球购物
数控技术专科生自我评价
2014/01/08 职场文书
2014年征兵标语
2014/06/20 职场文书
纪检干部现实表现材料
2014/08/21 职场文书
2014年网管工作总结
2014/12/11 职场文书
css实现文章分割线样式的多种方法总结
2021/04/21 HTML / CSS
详解Js模块化的作用原理和方案
2021/04/29 Javascript