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

如何绕过QQ音乐接口对host的验证？

针对一些特定的服务器，如QQ音乐接口，可能对host字段的验证比较严格。此时我们需要采取一些手段来进行绕过。

本文针对vue + webpack项目，将详细讲解如何绕过QQ音乐接口对host的验证。

方案一：使用webpack-dev-server的proxyTable

我们可以在webpack配置文件中的devServer选项添加proxyTable字段，对在本地代理到QQ音乐接口的请求进行拦截并重定向到我们指定的地址。

例如，我们可以将以下代码添加到webpack配置文件中：

devServer: {
    proxyTable: {
        '/api': {
            target: 'https://c.y.qq.com',
            secure: false,
            changeOrigin: true
        }
    }
}

这样，我们在vue项目中向/api路径发起的请求，会被webpack-dev-server拦截并将请求的url修改为'https://c.y.qq.com'，从而绕过了QQ音乐对host字段的验证。

方案二：手动修改请求头中的host字段

如果使用proxyTable无法解决问题，我们可以考虑手动修改请求头中的host字段。例如，我们可以在请求之前替换host字段为QQ音乐接口的域名。

以下代码展示了如何使用axios库进行请求并手动替换host字段：

import axios from 'axios'

const instance = axios.create({
    headers: {
        'Content-Type': 'application/json'
    }
})

const reqConfig = {
    url: 'http://y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg',
    method: 'get',
    headers: {
        'host': 'y.qq.com'
    }
}

instance(reqConfig).then(response => {
    // do something
    console.log(response.data)
})

在这个例子中，我们手动将host字段修改为'y.qq.com'，从而达到了绕过QQ音乐接口对host的验证的目的。

以上两种方法都是比较常见的解决方案。不同情况下，选择不同的解决方案可以提高绕过host验证的有效性与成功率。