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表单验证要注意的事项
Sep 29 Javascript
Javascript中的arguments与重载介绍
Mar 15 Javascript
JavaScript里四舍五入函数round用法实例
Apr 06 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
Apr 12 Javascript
简介JavaScript中Math.cos()余弦方法的使用
Jun 15 Javascript
谷歌Chrome浏览器扩展程序开发小记
Jan 06 Javascript
javascript简单实现等比例缩小图片的方法
Jul 27 Javascript
实现隔行换色效果的两种方式【实用】
Nov 27 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
Mar 10 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
JS实现数据动态渲染的竖向步骤条
Jun 24 Javascript
vue 动态生成拓扑图的示例
Jan 03 Vue.js
关于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文件向另一个地址post数据,不用表单和隐藏的变量的
2007/03/06 PHP
php入门学习知识点四 PHP正则表达式基本应用
2011/07/14 PHP
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
JavaScript版DateAdd和DateDiff函数代码
2012/03/01 Javascript
jquery禁用右键示例
2014/04/28 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
2014/06/05 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
2015/10/26 Javascript
理解jquery事件冒泡
2016/01/03 Javascript
大白话讲解JavaScript的Promise
2017/04/06 Javascript
Centos6.8下Node.js安装教程
2017/05/12 Javascript
详解AngularJS2 Http服务
2017/06/26 Javascript
详解node服务器中打开html文件的两种方法
2017/09/18 Javascript
Vue源码学习之初始化模块init.js解析
2017/11/02 Javascript
node.js博客项目开发手记
2018/03/16 Javascript
vue动态删除从数据库倒入列表的某一条方法
2018/09/29 Javascript
react写一个select组件的实现代码
2019/04/03 Javascript
layui表单提交到后台自动封装到实体类的方法
2019/09/12 Javascript
[20:21]《一刀刀一天》第十六期:TI国际邀请赛正式打响,总奖金超过550万
2014/05/23 DOTA
[49:13]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第一局
2016/02/27 DOTA
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
Python的“二维”字典 (two-dimension dictionary)定义与实现方法
2016/04/27 Python
基于Django用户认证系统详解
2018/02/21 Python
使用Python监视指定目录下文件变更的方法
2018/10/15 Python
python3+selenium实现qq邮箱登陆并发送邮件功能
2019/01/23 Python
Django使用uwsgi部署时的配置以及django日志文件的处理方法
2019/08/30 Python
python列表推导式操作解析
2019/11/26 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
浅谈Keras参数 input_shape、input_dim和input_length用法
2020/06/29 Python
python如何编写类似nmap的扫描工具
2020/11/06 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
HTML5 Web Database 数据库的SQL语句的使用方法
2012/12/09 HTML / CSS
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
TOWER London官网:鞋子、靴子、运动鞋等
2019/07/14 全球购物
编写一个 C 函数,该函数在一个字符串中找到可能的最长的子字符串,且该字符串是由同一字符组成的
2015/07/23 面试题
信用卡逾期证明示例
2014/09/13 职场文书
五星级酒店前台接待岗位职责
2015/04/02 职场文书