当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue + webpack如何绕过QQ音乐接口对host的验证详解

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

2018年08月06日  | 移动技术网IT编程  | 我要评论

触手控很多图,蔡依林大赞小s,调戏女仆

前言

最近在使用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. 请求数据

# 代码
 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数据

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

二、后端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)
 })
}

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对象

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

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网