突破藩篱，奏响天籁之音：Vue + Webpack 绕过 QQ 音乐接口验证
2023-10-26 19:26:09
踏上音乐之旅：打造移动端音乐播放器
前奏：音乐，灵魂的共鸣
音乐，一种超越语言和国界的共通语言，能够唤醒我们内心的共鸣。作为一名前端开发者，我怀着对音乐的热爱和对技术的探索，踏上了打造一款移动端音乐播放器的征途。在技术选型上，我选择了 Vue 和 Webpack，它们将成为谱写这曲动人乐章的黄金搭档。
初遇瓶颈，前路迷茫
万事开头难。当一切准备就绪，我 eager 地想要获取 QQ 音乐的歌单数据，为用户呈现丰富的音乐内容。然而，当我使用 JSONP 方式向 QQ 音乐接口发起请求时，却遇到了一个拦路虎：接口对 host 和 referer 的验证。这仿佛是一道无形的屏障，阻隔了我获取数据的脚步。
拨云见日，柳暗花明
面对困难，我从未轻言放弃。积极寻找解决方案，终于功夫不负有心人。在一位大神的帮助下，我找到了突破瓶颈的钥匙：使用修改后的 Webpack 4.x 版本绕过 QQ 音乐接口的验证。
揭秘妙招，拨开迷雾
以下是我绕过 QQ 音乐接口验证的妙招，希望能够帮助各位开发者在前端音乐开发的道路上披荆斩棘：
- 安装 JSONP 库
$ npm install -S jsonp
- 封装 JSONP 请求
创建一个 jsonp.js 文件，并将其放在项目的根目录下，内容如下：
import jsonp from 'jsonp';
export default function (url, options) {
return new Promise((resolve, reject) => {
jsonp(url, options, (err, data) => {
if (err) {
reject(err);
} else {
resolve(data);
}
});
});
}
- 请求 QQ 音乐接口数据
创建一个 index.js 文件，并将其放在项目的根目录下，内容如下：
import jsonp from './jsonp';
const url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg';
jsonp(url, {
params: {
categoryId: 10000000,
pageSize: 100,
page: 1,
},
})
.then((data) => {
console.log(data);
})
.catch((err) => {
console.error(err);
});
奏响华章，乐享天籁
至此，我们已成功绕过了 QQ 音乐接口的验证，并获取到了歌单 JSON 数据。接下来，我们可以使用这些数据为用户呈现丰富多样的音乐内容，打造一款功能强大、体验流畅的移动端音乐播放器。
尾声：音乐无界，共筑辉煌
音乐是人类共通的语言，它能跨越语言、文化和地域的界限，将人们的心灵紧紧相连。作为一名前端开发者，我将继续探索音乐与技术的融合，不断创造出更加惊艳、更加动听的音乐应用，让音乐的种子在每一个角落生根发芽，让音乐的旋律在每一个人的心中回荡。
常见问题解答
-
为什么要使用 JSONP 方式请求数据？
JSONP（JSON with Padding）是一种跨域请求数据的技术，它利用了
<script>标签可以跨域加载的特性，将数据包裹在回调函数中，从而绕过同源策略的限制。 -
为什么需要修改 Webpack 版本？
默认情况下，Webpack 会在打包过程中对请求的 host 和 referer 进行验证。为了绕过 QQ 音乐接口的验证，我们需要使用修改后的 Webpack 4.x 版本，它允许我们自定义打包规则。
-
如何封装 JSONP 请求函数？
我们可以创建一个
jsonp.js文件，并将其封装成一个通用的函数，方便我们在不同的项目中调用。这个函数接受一个 URL 和一组选项作为参数，并返回一个 Promise 对象。 -
如何请求 QQ 音乐接口数据？
我们可以创建一个
index.js文件，并使用封装好的 JSONP 请求函数向 QQ 音乐接口发起请求。请求参数包括 URL、参数和回调函数。 -
如何使用获取到的数据？
获取到的歌单 JSON 数据可以用于为用户呈现丰富的音乐内容，包括专辑列表、歌曲列表和歌手信息等。我们可以使用这些数据来构建一个功能强大的移动端音乐播放器。
