快捷導(dǎo)航

vue + webpack如何繞過QQ音樂接口對(duì)host的驗(yàn)證詳解

更新時(shí)間：2018年07月01日 15:29:00 作者：修飾

這篇文章主要給大家介紹了關(guān)于利用vue + webpack如何繞過QQ音樂接口對(duì)host的驗(yàn)證的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

最近在使用vue2.5+webpack3.6擼一個(gè)移動(dòng)端音樂項(xiàng)目, 獲取全部歌單json數(shù)據(jù)時(shí)遇到了接口對(duì)host和referer的限制，故不能直接在前端使用jsonp對(duì)接口數(shù)據(jù)的讀取。

一、先實(shí)現(xiàn)使用jsonp讀取的方式安裝jsonp模塊并，封裝請(qǐng)求方法

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)
 // 結(jié)果返回一個(gè)Promise對(duì)象
 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
 }
 // 去掉首個(gè)參數(shù)的&, 因?yàn)閖sonp方法中參數(shù)自帶&
 return params ? params.substring(1) : ''
}

3. 請(qǐng)求數(shù)據(jù)

# 代碼
 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. 組件內(nèi)調(diào)用getRecommend()方法, 獲取數(shù)據(jù)

methods: {
 _getRecommend() {
 getRecommend().then((res) => {
  // ERR_OK = 0是自定義的語義化參數(shù), 對(duì)應(yīng)返回json對(duì)象的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數(shù)據(jù)

以上是使用jsonp的方式請(qǐng)求數(shù)據(jù), 但對(duì)于被host和referer限制的json，需要繞過host驗(yàn)證，先讓服務(wù)端請(qǐng)求接口，前端頁面再通過服務(wù)端請(qǐng)求數(shù)據(jù)。而不能像jsonp那樣直接前端請(qǐng)求json對(duì)象。報(bào)錯(cuò)如下

二、后端axios(ajax)請(qǐng)求接口數(shù)據(jù)

1. 定義后端代理請(qǐng)求 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. 前端請(qǐng)求后端已獲取的遠(yuǎn)程數(shù)據(jù)

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, {
 // 以下參數(shù)自行參考源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. 組件內(nèi)調(diào)用getDiscList()方法，可輸出json數(shù)據(jù)

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()
}

總結(jié)， vue+webpack項(xiàng)目中，如需請(qǐng)求獲取遠(yuǎn)程json數(shù)據(jù)時(shí)，一般由兩種情況:

1. 未受host和referer限制的前端組件可以直接使用jsonp插件請(qǐng)求json對(duì)象

2. 受host和referer限制需要驗(yàn)證的，通過后端代理方式，使用axios請(qǐng)求，前端再請(qǐng)求后端json對(duì)象

好了，以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: