Vue仿qq音乐项目获取列表数据（反向代理）

老师视频中通过设置dev-sever.js实现了反向代理，但是新版的vue-cli4没有build文件夹也没有config文件夹，那怎么拿到数据呢？通过反复思考老师拿数据的原理以及查询大量文章，我找到了答案。
首先是这个获取数据的原理：qq音乐请求头设置了referer和host字段防止数据被爬，我们在纯前端是无法修改这个字段的。但是我们可以通过vue-cli的微型服务器拦截到前端请求，再修改referer和host字段然后微型服务器发送请求获取数据。
原理就是前端不再直接请求QQ音乐服务端，转而请求我们自己的服务器，自己的服务器拦截到请求修改referer和host字段再去请求qq音乐后端。
为了实现这个目的，我们要在项目根目录下创建一个vue.config.js文件(文件名一定不能错，务必在项目根目录下，与package.json平级)然后填写配置

module.exports = {
  devServer: {
      open: true,
      // 跨域
      proxy: {
        '/api/getDiscList': {
          target: 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg',
		  bypass:function(req,res,proxyOptions){
			req.headers.referer = 'https://c.y.qq.com/'
			req.headers.host = 'c.y.qq.com'
			
		  },
		  pathRewrite:{
			  '^/api/getDiscList':''
		  },
          changeOrigin: true
        }
      }
    }

}

然后前端代码不需要修改，附上前端代码

export function getDiscList() {
  const url = '/api/getDiscList'

  const data = Object.assign({}, commonParams, {
    platform: 'yqq',
    hostUin: 0,
    sin: 0,
    ein: 29,
    sortId: 5,
    needNewCode: 0,
    categoryId: 10000000,
    rnd: Math.random(),
    format: 'json'
  })

  return axios.get(url, {
    params: data
  }).then((res) => {
    return Promise.resolve(res.data)
  })
}