如何改变请求的host以及referer抓取做了host以及referer限制的接口数据

注：这篇文章为2017年10月发布，可能qq音乐已经做了更改，本例子不一定适用，仅供参考。

（提示于：2018-05-01）

最近在做一个抓取qq音乐接口数据的音乐App，使用vue开发，数据都从qq音乐中抓取，开发过程中遇到一个问题，比如以下接口：

https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg?g_tk=1928093487&inCharset=utf-8&outCharset=utf-8¬ice=0&format=jsonp&platform=yqq&hostUin=0&sin=0&ein=29&sortId=5&needNewCode=0&categoryId=10000000&rnd=0.10249614437651289

在qq音乐官网中可以查看到此为一个jsonp接口，理应通过jsonp跨域就可以获取到数据。但本人在开发时发现，发送jsonp请求会报500错误！

为什么一个jsonp请求却会报500错误呢？原因如图：

解释：qq音乐做了host和referer的校验，即该请求是在qq音乐该页面下发送的才会成功！！

我第一时间想到的解决方法是配置proxyTable代理，后来才想起来config文件夹下index.js中的proxyTable只是用于解决跨域问题，但这次的不只是跨域问题，而是跨域+host以及referer的限制！如果只是跨域问题，那么jsonp就足以解决！从纯前端的角度，我们是无法修改host和referer的，起码我知道的方法没有，那么我们应该如何改变host和referer？

亲测可用的解决办法：axios+devServer配置。

完整代码：

vue层methods：

api层封装方法：

跨域解决以及referer和host的修改

安装好axios后，在build文件夹下的webpack.dev.conf.js中的devServer中加上做一下配置：

至此，以上vue中methos请求的接口已经能成功返回数据，qq音乐做了限制的接口数据就这样被我们抓取到了，运行结果如下：