vue2.0用axios来进行referer伪造

当使用跨域jsonp接口时。referer属性是前台接口告诉服务器该接口的域名，而后台可以对应设置请求头referer从而对接口进行限制访问。
比如qq音乐的一个jsonp数据接口
https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg
其后台接口对referer和host的设置如下

referer: 'https://c.y.qq.com/',
host: 'c.y.qq.com'

如果访问的接口不是来自c.yy.com下的话。则会报错如下

故如果想拿到该接口数据可以进行伪造访问来路，不过这是一种欺骗服务器的手段，笔者并不提倡，仅供学习参考！
在老一点版本的vue2.0 配置下，config目录下有提供了dev-server 和 dev-client的配置，仿造refer配置如下

引入包

var app = express()
var apiRoutes = express.Router()

配置

apiRoutes.get('/getDiscList', function (req, res) {
  var url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg'
  axios.get(url, {
    headers: {
      referer: 'https://c.y.qq.com/',  //源域名
      host: 'c.y.qq.com'
    },
    params: req.query
  }).then((response) => {
    res.json(response.data)
  }).catch((e) => {
    console.log(e)
  })
})

app.use('/api', apiRoutes)

vue-cli升级到2.9.1之后，把webpack升级到了v3.6.0，里边去掉了dev-server和dev-client两个文件。 现在再对接口的设置不能再在dev-server配置了，而改在webpack.dev.conf.js里进行配置。该接口配置如下：

引入包

var express = require('express')
var axios = require('axios')
var app = express()
var apiRoutes = express.Router()

配置

devServer: {
    //添加一个before方法
    before(apiRoutes){
      apiRoutes.get('/api/getDiscList',(req,res)=>{
        const url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg';
        axios.get(url, {
          headers: {
            referer: 'https://c.y.qq.com/',
            host: 'c.y.qq.com'
          },
          params: req.query  //这是请求的query
        }).then((response) => {
          //response是api地址返回的，数据在data里。
          res.json(response.data)
        }).catch((e) => {
          console.log(e);
        })
      });
       app.use('/api', apiRoutes);
    },  
  },