如何通过后端接口代理，在Vue2.x项目中获取QQ音乐API的长尾词数据？

本文共计426个文字，预计阅读时间需要2分钟。

前言：部分QQ音乐的API接口不能直接通过JSONP访问，需要通过官方的代理才能获取，例如：歌词、推荐歌单等。

1. 在webpack.dev.conf.js中创建接口：javascript// 引入express和axiosvar express=require('express');var axios=require('axios');

// 创建express实例var app=express();

// 设置代理中间件app.use('/api', function(req, res, next) { // 发送请求到官方代理API axios.get('https://official-proxy-api.com' + req.url) .then(function(response) { // 返回官方API的响应 res.json(response.data); }) .catch(function(error) { // 处理错误 console.error(error); res.status(500).send('Error fetching data'); });});

// 启动服务器app.listen(3000, function() { console.log('Server is running on port 3000');});

前言: 部分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 = 'c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg' // 原api axios.get(url, { headers: { referer: '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的数据示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持易盾网络。