QQ音乐推荐歌单API报错 invalid referer

概述

准备通过vue全家桶仿制一个QQ音乐播放器，绝大多数根据网上抓取下来的API都是没有问题的。

在获取推荐歌单API的时候，发现接口老是返回invalid referer，下面我们来看看这个提示到底是什么鬼。

Referer

HTTP Referer是header的一部分,当浏览器向web服务器发送请求的时候，一般会带Referer，告诉服务器我是从哪个页面链接过来的，服务器基此可以获得一些信息用于处理。通俗的讲就是服务端辨识请求端的一个凭证，可以通过据此做一些请求限制。Referer其实应该是英文单词Referrer，最初拼写错了，之后大家也就都用着这个错误的写法了。查看MDN对referer解释。

返回 invalid referer

服务端识别到请求端并不是在自己的域名下发起的请求，给定了返回提示 “这是我自己的接口，你们是访问不到的”。我们怎么去绕过referer监测，或者说怎么伪造一个referer去躲过服务端这个限制呢。

解决方案

1. 方案一

通过node跟axios设置referer

vue-cli 项目下找到build文件夹下的webpack.dev.conf.js文件，导入express跟axios。

在`devServer`最后加上`before`函数。

2. 方案二

通过webpack反向代理proxyTable里面的bypass对请求头进行修改