关于Vue+webpack模板设置本地代理服务器

0x01 目的

在Vue前端开发中，我们经常要获取数据，而本地模拟数据有时不能够达到测试要求，这就需要我们自己搭建node.js服务接口，模拟或真实的进行网络请求，对我们的前端开发以及前后端搭配协作有莫大的帮助。

0x02 设置位置

如上图所示位置文件进行设置。
在进行Vue前端项目开发中，webpack为我们搭建了一个简易的node.js 服务器，在此服务器中，就可以轻松的进行请求代理设置。

0x03 具体设置

这里我们需要在起始位置引入两个模块

//引入request模块
const request = require('request')

//引入APIenc加密模块
const enc = require('../API_ENC/enc.js')

其中request模块是一个http请求模块，使用它可以轻松的完成GET、POST等请求，我们用它来向网易云音乐获取数据。
enc模块是我们自己编写的加密模块，网易云api请求对数据进行了ASE、RSA加密，我们编写模块来重构数据加密。
在devServer节点中建立before(app){}，在这里面写http的get和post请求，并通过api的形式传回前端：

devServer: {
    //此处设置代理API
    before(app) {
      app.get('/api/test', (req, res) => {
        console.log(req.query.data)
        console.log('{"s":"'+req.query.data+'","limit":"8","csrf_token":""}')
        const h = enc.enc('{"s":"'+req.query.data+'","limit":"8","csrf_token":""}')
        const _data = 'params='+h.encText+'&encSecKey='+h.encSecKey
        //const _data='params=I9poLQX4QhYUqTlGJ0BuBqrBGfjgpwEOy91ZkftCJVKEh2fEs0EMzJOgYGDTmEyz4GAwdhdAeZ3L0oQU%2BCcmJEBODxiqBinxplaKGtUpfp8%3D&encSecKey=cc402fbec71e6483371fdfc6f7e14701f54b8d0b731617803436647fa1ca8db8e77236287d4be8b21336f04d527e10a7948b6da773d3a5de638b0005a194fc6c48fa6e5de32dcf891c388feec4c97ec4c6b3b6bd208c1389d6776d1cbc16425c9e15847bdb42257390030a5b2660ab6d1db81200d4458f9f6d9e6640b7393f16'
        console.log(_data)
        try{
          request.post({
            url:'https://music.163.com/weapi/search/suggest/web?csrf_token=',
            form:_data,
            headers:{
              'Content-Type':'application/x-www-form-urlencoded',
              'User-Agent':'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36'
            }
          }, (error, response) => {
            if(response.body && response.body.length > 1){
              console.log(response.body)
              try{
                res.json({
                  error:0,
                  data:JSON.parse(response.body)
                })
              }catch (e) {
                console.log(e)
              }
            }else{
              console.log('数据空')
              res.json({
                error:0,
                data:{}
              })
            }
            //console.log(response.body)
          })
        }catch (e) {

        }
      }),
      app.post('/api/post', (req, res) => {
        res.json({
          errno: 0,
          data: 'helloPost'
        })
      })
    },
    //设置完毕
...其他代码  
}