webpack-dev-conf.js做后台数据模拟

以前学习vue时，通过在dev-server.js里书写代码来进行后台数据模拟。刚刚发现新版本的vue-cli 脚手架中没有了dev-server.js文件，该如何模拟后端数据呢？

需求：请求qq音乐接口数据时，由于host和referer的限制，请求被拒绝。很自然的想到要修改header，前端是不能直接修改request header的，需要通过后端代理的方式去解决。也就是需要我们手动代理这样的请求，前端请求我们自己的地址/api/getDiscList，然后我们的地址再去请求服务端。

我们自己的地址如何在nodejs请求服务端？

这里用ajax库axios，在浏览器中发送的是xmlhttprequest，而在nodejs中发送http请求，支持promise。

于是：通过axios来修改header。

别忘记首先要安装axios。这里只讨论webpack.dev.conf.js文件。

1、webpack.dev.conf.js文件

const express = require('express')
const axios = require('axios')
const app = express()
var apiRoutes = express.Router()
app.use('/api', apiRoutes)

2、找到devServer，向其中添加如下代码

   before(app) {
      app.get('/api/getDiscList', (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((error)=>{
          console.log(error)
        })
      })
    }

3. recommend.js文件中获取歌单数据

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)
    })
}

搞定。

 

参考：

1.SegmentFault

2.涂涂的csdn

3.webpack官网的devServer描述