2018-11-05 vue-cli 3.0+版本利用axios

一、问题描述

当使用跨域jsonp接口时。referer属性是前台接口告诉服务器该接口的域名，而后台可以对应设置请求头referer从而对接口进行限制访问。
当服务端对referer进行 验证后，非referer指定域名的请求访问该接口时，服务端会返回500。访问失败。

二、解决

由于在前端发送请求时无法直接修改referer值，故需要利用vue项目中的server进行请求转发，并在转发的同时设置referer进行伪造，冒充指定的域名欺骗服务端。

三、实践

在vue-cli 3.0-版本中，在config目录,提供了dev-server 和 dev-client的配置,可在dev-server.js文件中进行配置

//引包
var app = express()
var apiRoutes = express.Router()

//配置
apiRoutes.get('/getDiscList', function (req, res) {
  var url = 'xxxxx' //接口地址
  axios.get(url, {
    headers: {
      referer: 'xxxx/',  //指定referer
      host: 'xxxx' //指定主机名
    },
    params: req.query
  }).then((response) => {
    res.json(response.data)
  }).catch((e) => {
    console.log(e)
  })
})

app.use('/api', apiRoutes)

而在vue-cli 3.0+中对配置文件进行了简化，去除了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/xxxx',(req,res)=>{ //将对本api请求进行转发
        const url = 'xxx'; //转发的目的url
        axios.get(url, {
          headers: {
            referer: 'https://xxx',
            host: 'xxx'
          },
          params: req.query  //请求的query
        }).then((response) => {
          //response是api地址返回的，数据在data里。
          res.json(response.data)
        }).catch((e) => {
          console.log(e);
        })
      });
       app.use('/api', apiRoutes);
    }
  }

此处在项目实践中出现了代理失败的问题

404
此处出现了404，经排查，问题在于配置中的/api/xxx缺少了开头的斜杠`/，导致无法捕获到浏览器发出的本地请求，也就没有执行下面对headers进行配置后使用axios发送jsonp请求的逻辑。整个代理并没有触发，并且本地的接口也并不存在，所以404。