在学习vue音乐播放器的案例中，遇到一个跨域请求的问题，有一种解决方案，叫做后端代理。也可以直接将数据存储到本地，获取本地数据

在webpack.dev.conf.js中

• 定义app，这样就是不直接去请求服务端，是先请求webpack.dev.conf.js然后再请求服务器.欺骗服务器我们的refer和host

var axios = require('axios')
const express = require('express')
const app = express();

在devServer的配置中添加：

before(app) {
 app.get('/api/slider', (req, res) => {
    var url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg';
    axios.get(url,{
        headers:{
            referer: 'https://c.y.qq.com/',
             host: 'c.y.qq.com'
        },
        params: res.query
    }).then((response)=>{
        res.json(response.data)
    }).catch((e)=>{
        console.log(e)
    })
  })
}

//此地址就变成了`/api/slider` 给recommend.js来请求

recommend.js 调用

import axios from 'axios'

export function getDiscList() {
  const url = '/api/slider'

  const data = Object.assign({}, commonParams, {
    g_tk: 1194283357,
    uin: 1513013709,
    format: 'json',
    _:1528793843228
  })

  return axios.get(url, {
    params: data
  }).then((res) => {
    return Promise.resolve(res.data)
  })
}

获取本地数据

• 写一个json文件
• 在webpack.dev.conf.js中进行配置

//第一步:
const express = require('express')
const app = express()//请求server
var slider = require('../data/sliderData.json')//加载本地数据文件

//第二步找到devServer,在里面添加
before(app) {
  app.get('/api/slider', (req, res) => {
        res.json({
          status: 1,
          data: slider.data
        })//接口返回json数据，上面配置的数据seller就赋值给data请求后调用
  })
}

• 在js中调用

import axios from 'axios'
const url = '/api/slider';
return axios.get(url).then((res) => {
   return Promise.resolve(res.data)
})