vue2.x 通过后端接口代理,获取qq音乐api的数据

前言: 部分qq音乐的api接口不能直接通过jsonp访问,需要通过官方的代理才能获取,如:歌词,推荐歌单等

1. webpack.dev.conf.js中创建接口:

// 开头调用:
var express = require('express')
var axios = require('axios')
var app = express()
var apiRoutes = express.Router()
app.use('/api', apiRoutes)


// 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' // 原api
        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. api的js文件中,将url换成步骤1中自定义的接口,通过axios获取返回数据

import jsonp from 'common/js/jsonp'
import {commonParams, options} from './config'
import axios from 'axios'


export function getDiscList() {
  const url = '/api/getDiscList'


  const data = Object.assign({}, commonParams, {
    platform: 'yqq', // 加引号
    hostUin: 0,
    sin: 0,
    ein: 29,
    sortId: 5,
    needNewCode: 0,
    categoryId: 10000000,
    rnd: Math.random(),
    format: 'json'
  })


  return axios.get(url, {
    params: data
  }).then((res) => {
    return Promise.resolve(res.data)
  })
}
           

3. 组件中通过api的js文件中的方法获取数据

import {getDiscList} from 'api/recommend'


_getDiscList() {
  getDiscList().then((res) => {
    if (res.code === ERR_OK) {
      console.log('推荐:', res)
      this.discList = res.data.list
    } else {
      console.log('没,没有推荐')
    }
  })
}