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文件。

一、webpack.dev.conf.js文件

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

二、找到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描述