vue+webpack繞過QQ音樂介面對host的驗證

最近在使用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物件