Vue编写代理请求的方法改进

vue升级到2.9.1后，通过其vue-cli构建的webpack项目目录结构发生以下变化

更多精彩

• 更多技术博客，请移步 asing1elife’s blog

发生的变化

1. 在2.9.1之前，通过vue-cli构建的项目build目录如下，如左图
2. 在2.9.1之后，通过vue-cli构建的项目build目录如下，如右图

3. 通过以上两张图可以明确看出新版本构建出的项目缺少了dev-client.js和dev-server.js文件

造成的问题

1. 缺少dev-server.js文件之后，所带来的问题是之前我们在需要编写代理请求时会在该文件中自定义如下路由信息，而现在应该将这些路由信息存放在哪

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)

解决的方式

1. 其实在新版本中关于服务器的配置信息都被存放在webpack.dev.conf.js文件中，所以对于用来发送代理请求的自定义路由信息自然也应该存放到该文件中
2. 只是存放的方式稍有变化，在新版本中服务器通过webpack-dev-server进行管理，所以需要在该server启动之前将代理请求接口映射完毕
3. webpack3内置了express() ，以下代码中的app就是express返回的对象

devServer: {
  ...
  // 在服务器开启之前，将需要被代理的请求与本地接口进行一一对应
  before (app) {
    // 由于QQ音乐获取歌单列表的接口做了header信息的验证，所以需要通过代理的方式去模拟其规则范围的header，使用其允许的header发起请求
    app.get('/api/getDiscList', function (req, res) {
      // 真实的QQ音乐获取歌单列表的请求
      const url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg'

      // 通过axios发送异步请求
      axios.get(url, {
        // 在发送请求时修改头文件，模拟合法的头文件，去欺骗服务器获取请求数据
        headers: {
          referer: 'https://c.y.qq.com/',
          host: 'c.y.qq.com'
        },
        // 获取参数列表
        // 由于浏览器请求参数是穿透传播的，所以当前端请求getDiscList时，传递的参数在次数可以直接获取到
        params: req.query
      }).then((response) => {
        // res是本地方法接收本地请求的返回值
        // response是访问服务器接口的返回值
        // 此处只需要将从服务器获取的返回值通过json的方式传递给本地请求的返回值，即实现了一次代理转发
        res.json(response.data)
      }).catch((e) => {
        // 捕获错误信息并输出
        console.error(e)
      })
    })
  }
}