DDR爱好者之家

vue2.x 通过后端接口代理,获取qq音乐api的数据示例
站长资源 2025/10/27 佚名
74 1538
DDR爱好者之家 Design By 杰米

前言: 部分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('没,没有推荐')
  }
 })
}

以上这篇vue2.x 通过后端接口代理,获取qq音乐api的数据示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米