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 变量命名规则详解
May 07 Javascript
JS实现的省份级联实例代码
Jun 24 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
Sep 01 Javascript
webapp框架AngularUI的demo改造之路
Dec 21 Javascript
Node.js的包详细介绍
Jan 14 Javascript
javascript实现右侧弹出“分享到”窗口效果
Feb 01 Javascript
JavaScript File API实现文件上传预览
Feb 02 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 Javascript
Node.js 数据加密传输浅析
Nov 16 Javascript
JavaScript实现分页效果
Mar 28 Javascript
JavaScript编写的网页小游戏,很给力
Aug 18 Javascript
教你用Cordova打包Vue项目的方法
Oct 17 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+mysql留言本源码
2009/11/11 PHP
PHP中字符安全过滤函数使用小结
2015/02/25 PHP
CodeIgniter框架数据库基本操作示例
2018/05/24 PHP
JavaScript Eval 函数使用
2010/03/23 Javascript
js实现按Ctrl+Enter发送效果
2014/09/18 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
2016/11/07 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
2019/06/10 jQuery
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
2019/11/12 Javascript
vue.js实现h5机器人聊天(测试版)
2020/07/16 Javascript
详解JavaScript 的执行机制
2020/09/18 Javascript
vue3.0 自适应不同分辨率电脑的操作
2021/02/06 Vue.js
Python正则获取、过滤或者替换HTML标签的方法
2016/01/28 Python
Python+request+unittest实现接口测试框架集成实例
2018/03/16 Python
python通过伪装头部数据抵抗反爬虫的实例
2018/05/07 Python
使用pandas模块读取csv文件和excel表格,并用matplotlib画图的方法
2018/06/22 Python
pandas将numpy数组写入到csv的实例
2018/07/04 Python
如何使用Python自动控制windows桌面
2019/07/11 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
python框架Django实战商城项目之工程搭建过程图文详解
2020/03/09 Python
python中sympy库求常微分方程的用法
2020/04/28 Python
Pytorch mask-rcnn 实现细节分享
2020/06/24 Python
如何在scrapy中捕获并处理各种异常
2020/09/28 Python
电脑专业个人求职信范文
2014/02/04 职场文书
《一株紫丁香》教学反思
2014/02/19 职场文书
财务科科长岗位职责
2014/03/10 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
差生评语大全
2014/05/04 职场文书
2015年妇女工作总结
2015/05/14 职场文书
高中升旗仪式主持词
2015/07/03 职场文书
军训阅兵新闻稿
2015/07/17 职场文书
《猴王出世》教学反思
2016/02/23 职场文书
golang DNS服务器的简单实现操作
2021/04/30 Golang
python用海龟绘图写贪吃蛇游戏
2021/06/18 Python
使用CSS实现按钮边缘跑马灯动画
2023/05/07 HTML / CSS