vue + webpack如何绕过QQ音乐接口对host的验证详解

绕过QQ音乐接口对host的验证：Vue与Webpack的联手挑战

前言：

在利用Vue和Webpack构建移动端音乐项目时，获取全部歌单json数据的过程中，我们可能会遇到接口对host和referer的限制。这种情况下，直接前端使用jsonp读取接口数据可能会受到限制。本文将详细介绍如何通过Vue和Webpack绕过QQ音乐接口的host验证，获取所需数据。

一、安装并封装jsonp模块

我们需要安装jsonp模块，用于封装请求方法。通过npm安装jsonp模块：

```shell

npm install -S jsonp

```

接下来，我们进行jsonp方法的封装。首先引入jsonp模块，并定义两个函数jsonp和params。jsonp函数用于发送请求并返回Promise对象，params函数用于生成url参数。

```javascript

import originJSONP from 'jsonp';

function jsonp(url, data, options) {

// 根据url的情况添加参数

url += (urldexOf('?') < 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] : '';

params += '&' + k + '=' + encodeURIComponent(value); // ES6写法

}

// 去掉首个参数的'&'，因为jsonp方法中参数自带'&'符号

return params ? params.substring(1) : '';

}

```

二、请求数据绕过host验证

由于接口对host和referer有限制，我们无法直接前端请求json数据。我们需要通过服务端请求接口，前端页面再通过服务端获取数据。具体实现方式如下：

设置请求的通用参数和选项：

```javascript

const monParams = {

g_tk: 5381,

inCharset: 'utf-8',

outCharset: 'utf-8',

notice: 0,

format: 'jsonp'

};

const options = {

param: 'jsonpCallback'

};

```

然后，定义getRemend方法，通过封装好的jsonp方法发送请求：

```javascript

getRemend() {

const url = '

const data = Object.assign({}, monParams, {

platform: 'h5',

uin: 0,

needNewCode: 1

});

return jsonp(url, data, options);

}

二、后端axios（ajax）请求接口数据大介绍

在Vue和Webpack项目中，我们经常需要从后端请求数据。这时，axios就成了我们的得力助手。接下来，让我们一起如何在项目中设置和使用axios请求后端数据。

1. 定义后端代理请求，修改build/webpack.dev.config.js文件

我们需要配置后端代理，以便能够使用axios发送请求。在`webpack.dev.config.js`文件中，我们可以这样做：

引入axios库后，在devServer的before函数中，我们添加一个针对`/api/getDiscList`的GET请求处理。当这个请求被触发时，我们会向一个特定的URL发送axios GET请求，并处理响应。为了绕过某些限制，我们还需要设置referer和host头信息。请求的参数将直接从请求的查询字符串中获取。

2. 前端轻松请求后端已获取的远程数据

在前端，我们可以使用axios库来发送请求。定义一个`getDiscList`函数，它构建一个URL并设置必要的参数，然后发送一个GET请求。这样，我们就可以轻松地从后端获取数据。

3. 组件内调用getDiscList()方法，获取并处理json数据

在Vue组件中，我们可以在methods内定义`_getDiscList()`方法，并调用前面定义的`getDiscList()`函数。这样，我们就可以在组件创建时获取远程数据，并在控制台中打印出来。如果返回的数据状态码为ERR_OK，我们可以进一步处理这些数据。

关于请求的两种情况

当我们请求远程json数据时，通常面临两种情况：

如果请求不受host和referer限制，前端组件可以直接使用jsonp插件请求json对象。

如果请求受host和referer限制需要验证，我们可以通过后端代理方式使用axios请求，然后前端再请求后端的json对象。

这就是在Vue和Webpack项目中如何使用axios处理后端接口数据的方法。希望这篇文章能帮助你更好地理解和应用这一技术。如果有任何疑问或需要进一步的交流，请随时留言。感谢大家对狼蚁SEO的支持！